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"

Answer 1

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>

Answer 2

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>";