Facing undefined error in json using javascript

Question

I am using javascript ajax to fetch data from the JSON API server and want to show these data in an HTML table. But I get an undefined error in HTML data. That is


Name         id
undefined undefined

There is my code


<html>

<body>


      <table class = "src">
         <tr><th>Name</th><th>id</th></tr>
         <tr><td><div id="Name"></div></td>
         <td><div id="Id"></div></td></tr>
      </table>



   </body>

</html>
<script type="text/javascript">
   var xmlhttp = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/users";

   xmlhttp.onreadystatechange = function(e) {

               if (this.readyState == 4 && this.status == 200)  {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(this.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").innerHTML = jsonObj.name;
                  document.getElementById("Id").innerHTML = jsonObj.id;
               }
            }

             xmlhttp.open("GET", url, true);
            xmlhttp.send();
</script>

What should I do to resove this? Thanks in advance.

Can you post the data that you receive from ```jsonObj``` by doing ```console.log(jsonObj)``` ?? — Maniraj Murugan, Apr 19 '20 at 10:43
We can't help you without seeing the JSON, but apparently it isn't in the form `{"name": "some name", "id": "some id"}`. More: https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json — T.J. Crowder, Apr 19 '20 at 10:43
Side note: You'd probably be better off assigning to `textContent` rather than `innerHTML`, in case either field has characters you don't want interpreted in their HTML sense. — T.J. Crowder, Apr 19 '20 at 10:44

omnidan · Accepted Answer · 2020-04-19T10:50:40.153

The problem is that you are trying to access an object, but the output of the API is actually an array. You can get the first object by doing jsonObj[0], as follows:

<html>

<body>


      <table class = "src">
         <tr><th>Name</th><th>id</th></tr>
         <tr><td><div id = "Name"></div></td>
         <td><div id = "Id"></div></td></tr>
      </table>



   </body>

</html>
<script type="text/javascript">
   var xmlhttp = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/users";

   xmlhttp.onreadystatechange = function(e) {

               if (this.readyState == 4 && this.status == 200)  {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(this.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").textContent = jsonObj[0].name;
                  document.getElementById("Id").textContent = jsonObj[0].id;
               }
            }

             xmlhttp.open("GET", url, true);
            xmlhttp.send();
</script>

See this codesandbox where the code is working.

Edit: As T.J. Crowder has mentioned, it is better to use textContent rather than innerHTML to avoid unwanted HTML to be rendered (never trust user input!).

@AwaisHassan in that case you need to loop over all items in the array, create new `tr` and `td` elements, set the contents there, and then insert the new elements into the `table`. have a look at [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and [`Element.insertAdjacentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML). — omnidan, Apr 19 '20 at 12:02
@AwaisHassan I recommend that you read up on how to loop through arrays and create new DOM elements in JavaScript, I have linked two pages that you can use for reference regarding creating DOM elements. To loop through the array you can use [`Array.forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). — omnidan, Apr 19 '20 at 12:09

Facing undefined error in json using javascript

1 Answers1