Hot to create a list dynamically with html and css

Question

I'm working to a homework and I wrote the frontend in html, css, javascript. Till now when I press a button I get some data from backend and in javascript a parse the response. The response is an array of items. An item is a structure. What I want it's to build dynamically a list of those items. I didn't find on google a way of doing that with javascript. Some hints/help?

What I tried, you can see below, is to append some HTML to an HTML element - it didn't work.

xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                source.value = "";
                destination.value = "";

                var array_rides = JSON.parse(this.responseText).results;
                var rides_length = array_rides.length;
                for (var i = 0;i < rides_length;i++) {
                    console.log(array_rides[i][DRIVER]);
                    console.log(array_rides[i][RIDERS]);
                    console.log(array_rides[i][SOURCE]);
                    console.log(array_rides[i][DESTINATION]);
                    console.log(array_rides[i][START]);
                    console.log(array_rides[i][SEATS_AVAILABLE]);
                    console.log(array_rides[i][SEATS_TOTAL]);

                    my_list.append('<span class="name">{0}</span>'.format(array_rides[i][DRIVER]));
                }
            }
};

So, I want a list which is dynamically populated. Something like (table ish):

array_rides[0][DRIVER], array_rides[0][RIDERS], ...
array_rides[1][DRIVER], array_rides[1][RIDERS], ...
...
array_rides[n][DRIVER], array_rides[n][RIDERS], ...

which, of cours, to inherit some css.

Answer 1

I assume a list in the document, like a product table or something.

The easiest way to do this is by just looping through your list and inserting it into a table or something. An example could be this:

 function somefunc() { var table = document.getElementById('my_table'); var array_rides = ['cell1', 'cell2', 'cell3', 'cell4']; var string; string = "<table>"; for (var i = 0;i < array_rides.length;i++) { //add table row string += "<tr>"; //add all items in tabel cells //you just have to replace the array_rides[i] with array_rides[i].DRIVER, array_rides[i].RIDERS... and so on string += "<td>"+array_rides[i]+"</td>"; string += "<td>"+array_rides[i]+"</td>"; string += "<td>"+array_rides[i]+"</td>"; string += "<td>"+array_rides[i]+"</td>"; string += "<td>"+array_rides[i]+"</td>"; string += "<td>"+array_rides[i]+"</td>"; //close table row string += "</tr>"; } string += "</table>"; table.innerHTML = string; }

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Testpage</title> </head> <body onload="somefunc();"> <div id="my_table"></div> </body> </html>

basically what this does is take all the data from the array and append them to a table. You could add some CSS too to make it look nicer

Hot to create a list dynamically with html and css

Question

1 answers

solution1
1 ACCPTED 2019-04-07 20:19:47

Hot to create a list dynamically with html and css

Question

1 answers

solution1 1 ACCPTED 2019-04-07 20:19:47

solution1
1 ACCPTED 2019-04-07 20:19:47