Moving Requested Objects to Separate Rows within a Table

Moving Requested Objects to Separate Rows within a Table
0

#1

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:


#2

I used the majority of your code, but to make it work, I had to restructure the way you built the table. I added a css class and modified a few of the existing css classes. Here is a JSFiddle of what I was able to achieve. Of course, if someone does not know what usernames you have chosen, they would not know if a valid twitch username existed or not. Also, if no results showed up, they would not know if they made a typo or if it just did not exist in your selected usernames.


#3

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}">.


#4

That is my point exactly (see the JSFiddle).


#5

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. :wink:


#6

I agree. I personally would not implement such a feature for only a few users, but it is not my project. I proposed the solution to show a way of approaching it.