I have a search filter that I would like to use to find channels on my page as the user is typing it. However, when calling on this API, I am unable to separate each object into a different row because the channel objects are all stored within the same row of the table data. I am storing the objects in their respective table data, but don’t know a specific way of tackling this problem. Should I be using a for loop or perhaps add more table datas in my HTML? You can check out my codepen and remove the comment braces to run the last for loop within my function to get an idea.
Here’s my codepen:
This shows the importance of using structure that fits the semantics of the data (even in an intermediary format like HTML).
Instead of appending to each <td> with <br> at the end, append each channel and its corresponding data as new <tr>s in the table. Then if you want no borders shown in the table other than under the header row, style that in the CSS.
For easy search/manipulation, consider using <tr id="${channelName}">.
Sorry, didn’t look at the code closely enough. Looks close to what OP wants, but I’m guessing “as the user types” means it does something more sophisticated with search matching (i.e. at least allowing partial matches and case insensitivity). Also, it’s quite likely you’d want to display all channels when the search box is blank.
But OP can probably implement that themselves. 