Parsing JSON Array to table HTML

Question

I have problem when i want to get a value from json

const data = {
  "first_name": "Sammy",
  "last_name": "Shark",
  "location": "Ocean",
  "websites": [{
    "description": "work",
    "URL": "https://www.digitalocean.com/"
  }, {
    "desciption": "tutorials",
    "URL": "https://www.digitalocean.com/community/tutorials"
  }],
  "social_media": [{
    "description": "twitter",
    "link": "https://twitter.com/digitalocean"
  }, {
    "description": "facebook",
    "link": "https://www.facebook.com/DigitalOceanCloudHosting"
  }, {
    "description": "github",
    "link": "https://github.com/digitalocean"
  }]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script type="text/javascript">
  var dataTarget = "https://tech/json-data.php";
  $.getJSON(dataTarget, function(data) {
    var output;
    output += `<tr>
                <th scope="col">name</th>
                <th scope="col">description</th>
                <tbody>`
    $.each(data, function(key, val) {
      output += '<tr>';
      output += '<td>' + val.websites.description + '<td>';
      output += '</tr>';
      output += '</tbody>';
    });
    $('table').html(output);
  });
</script>

but it showing an error code "Uncaught TypeError: Cannot read property 'description' of undefined"

it is websites and websites is an array . You should iterate over data.val.websites and then read from each entry the description — Aalexander
– Aalexander, Commented Feb 7, 2021 at 17:08
sorry I typed it wrong, which is actually in my code is websites — JuMa
– JuMa, Commented Feb 7, 2021 at 17:11

uingtea · Accepted Answer · 2021-02-07 17:32:11Z

if you only need websites decription, use data.websites for $.each() parameter, because from data you need second loop/each

var data = {
  "first_name": "Sammy",
  "last_name": "Shark",
  "location": "Ocean",
  "websites": [{
      "description": "work",
      "URL": "https://www.digitalocean.com/"
    },
    {
      "description": "tutorials",
      "URL": "https://www.digitalocean.com/community/tutorials"
    }
  ],
  "social_media": [{
      "description": "twitter",
      "link": "https://twitter.com/digitalocean"
    },
    {
      "description": "facebook",
      "link": "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description": "github",
      "link": "https://github.com/digitalocean"
    }
  ]
}

var output = ''
$.each(data.websites, function(key, val) {
  output += '<tr><td>' + val.description + '</td></tr>';
});
//console.log(output)
$('table').html(output);

<table></table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

David Malášek · Accepted Answer · 2021-02-07 17:15:15Z

0

It is throwing an error because the "websites" key is an array, instead you should access the array element by referring to it's index number like this:

output += "<td>" + val.websites[0].description + "<td>";

answered Feb 7, 2021 at 17:15

David Malášek

1,4321 gold badge11 silver badges24 bronze badges

7 Comments

JuMa Over a year ago

i've try this one, but now showing error " Uncaught TypeError: Cannot read property '0' of undefined"

David Malášek Over a year ago

Well, maybe provide more of your JSON code, I will take a look.

JuMa Over a year ago

i try to use this way data.websites.description this code not give an error code, but still no data showing on the table, just show "undifined"

David Malášek Over a year ago

What about data.websites[0].description ? @JuMa

David Malášek Over a year ago

@JuMa real question is do you want to parse every value from the "websites" array or just one?

|

Collectives™ on Stack Overflow

Parsing JSON Array to table HTML

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related