How 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.

Joeri · Accepted Answer · 2019-04-08 08:02:29Z

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

edited Apr 8, 2019 at 8:02

answered Apr 7, 2019 at 20:19

Joeri

6565 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bogdan Cretu Over a year ago

I think that's exactly what I'm looking for, but I have a problem. What html element is the element with the id "my_table"? I tried: <div class="table" id="my_table"></div>. In that way, it does nothing

Joeri Over a year ago

The easiest thing to do is to just place a <div> element in your HTML file with the ID my_table, like so: <div id="my_table"> </div>

Joeri Over a year ago

If this doesn't work there's probably a mistake somewhere in my code and I'll take a look at it tomorrow

Bogdan Cretu Over a year ago

Ahh, I found the problem. Solution is 99% good. The problem is that you have to maintain the html into a string. So it's like. my_string = "<table>" ... and then (after loop and my_string = "</table>" you have to make table.innerHTML = my_string.

Joeri Over a year ago

Oh oops, you're right indeed. I'll edit it as soon as I get the chance

Collectives™ on Stack Overflow

How to create a list dynamically with html and css

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related