Table data not inserted to my table from my JavaScript Code

Question

I am very new to JavaScript. I am trying to insert someObject data to my table using Javascript. But unfortunately, my code is not working. I am unclear where I am going wrong. Please find my code below. Any help will be really helpful for me.

  function myFunction(){
  var data = '{ "name":"John", "age":30, "city":"New York"}'
  var obj = JSON.parse(data);
  var toSHow = document.getElementById("datum");//my table ID is datum
var empData = "";
  for(var i=0; i<obj.length; i++)
    empData += '<tr>';
    empData += '<td>'+data.name+'</td>';
    empData += '<td>'+data.age+'</td>';
    empData += '<td>'+data.city+'</td>';
    empData += '</tr>';
  }

}
toSHow.append(empData);
</script>

Marvin Fischer · Accepted Answer · 2019-02-11 07:19:58Z

1

I have adjusted your code a bit and commented on it:

function myFunction(){
    var data = '[{"name":"John", "age":30, "city":"New York"}, {"name":"Doe", "age":25, "city":"LA"}]' // Converted to array and added second element for example
    var obj = JSON.parse(data);
    var toSHow = document.getElementById("datum");//my table ID is datum

    for(var i=0; i < obj.length; i++) {
        // Reset empData every loop
        var empData = "";

        // Create new element to attach instead of adding plain text
        var newTr = document.createElement('tr');

        // Get data from object by index
        empData += '<td>'+obj[i].name+'</td>';
        empData += '<td>'+obj[i].age+'</td>';
        empData += '<td>'+obj[i].city+'</td>';

        // Set table data
        newTr.innerHTML = empData;

        // Append row every loop
        toSHow.append(newTr);

    }
}

edited Feb 11, 2019 at 7:19

answered Feb 11, 2019 at 7:14

Marvin Fischer

2,5823 gold badges25 silver badges34 bronze badges

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

4 Comments

little_code Over a year ago

hey! not getting the result even after implementing this code. Do I need to add any more parameters to my HTML..?

Marvin Fischer Over a year ago

I implemented it here: codepen.io/sidiadevelopment/pen/yZjBdy did you make sure to call the function?

little_code Over a year ago

Great Dear! As I am new to JavaScript, The mistake I was doing was not calling it outside the loop. Thanks for all your effort. It really helped me a lot.

Marvin Fischer Over a year ago

By the way, this would be the code in (more) modern JS: codepen.io/sidiadevelopment/pen/yZjBdy (might break older IE versions though)

Sunjith · Accepted Answer · 2019-02-11 07:10:42Z

1

I guess instead of data.name,age & city you may have to use obj.name,obj.age & obj.city

answered Feb 11, 2019 at 7:10

Sunjith

761 gold badge1 silver badge11 bronze badges

Comments

P Varga · Accepted Answer · 2019-02-11 07:10:58Z

0

The variable empData is defined in myFunction, and is undefined outside it.

answered Feb 11, 2019 at 7:10

P Varga

20.4k14 gold badges77 silver badges118 bronze badges

1 Comment

little_code Over a year ago

can you please suggest me where I need to declare empData in my code.

Collectives™ on Stack Overflow

Table data not inserted to my table from my JavaScript Code

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related