Dynamically generate HTML rows in AJAX

Question

This is a bit tricky to explain, I'll try my best.

I have a website based on Spring that uses static HTML pages with AJAX and jQuery. I want to present some info in an HTML page that will always vary in size.

I have a table such as this: (don't mind the terrible design)

So, depending on the number of countries and users returned from the API, I want to have different number of rows.

I'm currently using a jQuery function to inject the HTML code after submitting this form:

Such as this:

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
      url: '/api/stats/' + $(event.currentTarget).serialize(),
      type: 'GET',
      success(msg) {
          // language=HTML
          $('#result').html(`
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                            <tr> <!-- I want to generate here the right amount of rows -->
                                <td>Test</td>
                                <td>2</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>`);
      },
      error() {
          $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
      },
  });

The response received from the API looks like this:

{
"countries":
    [{"data":xx,"users":xx},
    {"data":xx,"users":xx}],
"other data":
    [whatever]
}

And so on.

How can I render N rows if N is the size of the countries array?

Build the html? var rows = ''; msg.countries.forEach((country) => rows += "<td>" + country.data + "</td>"); and then concat rows to your $result? — Blue
– Blue, Commented Dec 13, 2017 at 17:26
Okay that was easy, huh. Please post as an answer so I can accept it! — dari1495
– dari1495, Commented Dec 13, 2017 at 17:33

Mickaël Leger · Accepted Answer · 2017-12-13 18:51:12Z

3

One solution could be to build your "html" content in 3 part : the begin of your bloc, a loop for each rows according to the size of the countries array, then the end of the bloc :

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
  url: '/api/stats/' + $(event.currentTarget).serialize(),
  type: 'GET',
  success(msg) {
      // language=HTML

      // The begin of your html bloc
      var result = `
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                   `;

      // Just get your countries array here and loop, this can be wrong
      $.each(response.countries, function() {
          // build each row as you need
          result += '<tr>' + 
                        '<td>' + this.data + '</td>' +
                        '<td>' + this.users + '</td>' +
                     '</tr>';
      });

      // The end of your html bloc
      result += `              
                    </tbody>
                </table>
            </div>
        </div>
                `;

      $('#result').html(result);
  },
  error() {
      $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
  },
 });

Is it what your are looking for?

edited Dec 13, 2017 at 18:51

answered Dec 13, 2017 at 17:37

Mickaël Leger

3,4482 gold badges21 silver badges37 bronze badges

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

6 Comments

Luke Over a year ago

Don't forget to remove the <td>Test</td><td>2</td> from the end of the html bloc! 😊

Mickaël Leger Over a year ago

Yeah sorry I started to write it before you post your anwser but you were faster ! And ty I edited my post ;)

showdev Over a year ago

I like your use of $.each. You might flesh out the // your data part to really complete the answer.

showdev Over a year ago

Thanks, I appreciate your edits. I tried running the code and there seem to be a couple of errors. I'd suggest using template literals to build the strings, since only quoting multiline strings throws an error in JavaScript. Also, there seems to be a missing parenthesis after the each. Example here. Nice work!

Mickaël Leger Over a year ago

@showdev : thanks for the feedback, I add the missing ");" and change the " by ' to avoid conflict with other "..." for the class name. I don't really see your point using "template literals", can you explain me a little please? (sorry I have flu, my brain is kinda slow tonight !)

|

Luke · Accepted Answer · 2017-12-13 17:30:06Z

I would assign the rest of my HTML to a variable like so:

var html = `<div class="container">
            <h2>Country stats:</h2>
            <div class="panel panel-group">
                <table>
                    <thead>
                        <tr> 
                            <th>Country</th>
                            <th>Users</th>
                        </tr>
                     </thead>
                     <tbody>`;

Then, add your rows:

for(var i = 0; i < msg.countries.length; i++){
    html += "<tr><td>" + msg.countries[i].data + "</td><td>" + msg.countries[i].users + "</td></tr>";
}

Finally, add the end of the HTML and set it to the element:

html += `</tbody>
                </table>
            </div>
        </div>`;
$('#result').html(html);

Hope this helps!

Collectives™ on Stack Overflow

Dynamically generate HTML rows in AJAX

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related