JavaScript Create Table hash [duplicate]

Question

I have the below code which should be taking the value of each data result and publishing it to a HTML Table. I can't figure out why the below isn't working:

<html>
  <head>
    <script type="text/javascript">
    data = { d : {
        results: [
            { Title: 'Title1', Description: 'Description1', Status: 'Status1', Complete: 'Complete1' },
            { Title: 'Title2', Description: 'Description2', Status: 'Status2', Complete: 'Complete2' },
            { Title: 'Title3', Description: 'Description3', Status: 'Status3', Complete: 'Complete3' },
            { Title: 'Title4', Description: 'Description4', Status: 'Status4', Complete: 'Complete4' } ] } };

    data.d.results.push({Title: 'Title5', Description: 'Description5', Status: 'Status5', Complete: 'Complete5'});


    $(document).ready(function() {
        for (var i = 0; i < data.d.results.length; i++) {
            item = data.d.results[i];
            str  = '<tr><td>' + item.Title + '</td><td> ' + item.Description + '</td><td>' + item.Status + '</td><td>' + item.Complete + '</td></tr>';
            $('#mytab tr').last().after(str);
       }
    });

    </script>
  </head>
  <body>
  <table id="mytab">
    <tr>
      <td>Task Title</td> <td>Description</td> <td>Task Status</td> <td>% Complete</td>
    </tr>
  </table>
  </body>
</html>

I couldn't reproduce the problem but I had to import jquery which you might be missing. — Aaron
– Aaron, Commented Mar 6, 2017 at 14:38
Did you check your console for errors? It tells you what the problem is. — Ruan Mendes
– Ruan Mendes, Commented Mar 6, 2017 at 14:42

Priya Ranjan Singh · Accepted Answer · 2017-03-06 14:45:18Z

1

Extending Patrick's idea here. You can ensure JS executes after DOM is loaded by using:

$(document).ready(function() {
   // execute your JavaScript code
   // that depends on DOM
});

answered Mar 6, 2017 at 14:45

Priya Ranjan Singh

1,5671 gold badge15 silver badges30 bronze badges

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

2 Comments

Jaron787 Over a year ago

I've done that but i keep getting: ReferenceError: $ is not defined in the console

Priya Ranjan Singh Over a year ago

In your comments section in question everyone asked you to include jQuery. Your code depends on it. Look at this question and accepted answer carefully. stackoverflow.com/questions/7496789/…

Patrick Hund · Accepted Answer · 2017-03-06 14:44:42Z

0

Your script is running before your table is rendered in the DOM. Try moving your script tag from the <head> to right before the closing </body> tag.

edited Mar 6, 2017 at 14:44

answered Mar 6, 2017 at 14:40

Patrick Hund

20.4k12 gold badges71 silver badges97 bronze badges

Collectives™ on Stack Overflow

JavaScript Create Table hash [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related