How Can I Show All The Data on the table From the Json File Using Jquery and Ajax

Question

This is the Json Data

{ "siteList": [ 
  { "siteName": "Site1", 
      "deviceList": [ 
          { "deviceName": "S1device1", "count": "1" }, 
          { "deviceName": "S1device2", "count": "2" } 
          ] 
  }, 
  { "siteName": "Site2", 
      "deviceList": [ 
          { "deviceName": "S2device1", "count": "1" }, 
          { "deviceName": "S2device2", "count": "2" } 
          ] 
  }, 
  { "siteName": "Site3", 
      "deviceList": [ 
          { "deviceName": "S3device1", "count": "1" }, 
          { "deviceName": "S3device2", "count": "2" } 
          ] 
  } 
  ] 
}

This is The Code I tried

$(document).ready(function(){
   $.ajax({
    url:'user.json',
    dataType: 'json',
    success: function(json)
        {
          // get the `airport` array 
          var device= json.siteList.deviceList;

          // loop through the array to populate your list
          $.each(device, function(i, currentAirport) {  
           // add and option tag to your existing list 
           $('#yourlist').append(new Option( "<tr>"+"<td>"+currentAirport.deviceName+"</td>"+"</tr>" ));
  });
}

  });
});

The Output is attached below:

Please Help me Figure Out this code finding no clue about this

I want to get the siteName,deviceName and count

Any Help would be highly appreciated, Thank you in advance

Where’s your HTML? Why are you creating `Option`s? What is the problem? Familiarize yourself with [how to access and process nested objects, arrays or JSON](https://stackoverflow.com/q/11922383/4642212) and use the available [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods_of_the_Object_constructor), [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods), and [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) methods. — Sebastian Simon, Aug 31 '20 at 13:30
Why don't you use library such data table? I think it would be useful for you. — masoumeh miran, Aug 31 '20 at 13:38

score 1 · Accepted Answer · answered Aug 31 '20 at 13:42

You need to first get siteList and then using this you need to loop through the array which is inside it i.e: deviceList and then use .append() to append new trs to table .

Demo Code :

var json = {
  "siteList": [{
      "siteName": "Site1",
      "deviceList": [{
          "deviceName": "S1device1",
          "count": "1"
        },
        {
          "deviceName": "S1device2",
          "count": "2"
        }
      ]
    },
    {
      "siteName": "Site2",
      "deviceList": [{
          "deviceName": "S2device1",
          "count": "1"
        },
        {
          "deviceName": "S2device2",
          "count": "2"
        }
      ]
    },
    {
      "siteName": "Site3",
      "deviceList": [{
          "deviceName": "S3device1",
          "count": "1"
        },
        {
          "deviceName": "S3device2",
          "count": "2"
        }
      ]
    }
  ]
}

// get the array 
var device = json.siteList;

// loop through the array to populate your list
$.each(device, function(i, sites) {
  console.log(sites.siteName)
  $.each(sites.deviceList, function(i, values) {
    // append values to table
    $('#yourlist').append("<tr>" + "<td>" + values.deviceName + "</td>" + "<td>" + values.count + "</td>" + "</tr>");
  });
});

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

<table id="yourlist" border="1">
  <tr>

    <th>deviceName</th>
    <th>count</th>
  </tr>

</table>

How Can I Show All The Data on the table From the Json File Using Jquery and Ajax

1 Answers1