如何获取代码以显示与JSON文件中的值相关联的字符串数据，而不是返回“ undefined”值？

Question

I would like to populate an HTML table with JSON data. Problem is I am currently getting values of undefined when I populate the table with data from the URL.My JSON data from the URL is nested so I am not sure if this is what's causing the error.

   {
"result": [
{
"ITEM_NO": 2,
"ITEM_NME": "PPNA T-Shirt (XS)",
"ITEM_DESC": "Proudly display your support for Baltimore's greenest neighborhood by wearing our T-Shirt when you're out and about!",
"ITEM_ICON_URL": null,
"ITEM_PRICE": "20.00",
"ITEM_CATG_CD": 1,
"ITEM_TYP_CD": null,
"ITEM_AVLB_QTY": "3.00",
"ITEM_STAT_CD": 1,
"item_fee_list": [
{
"FEE_TYP_CD": 1,
"ITEM_FEE_AMT": "4.00",
"ITEM_FEE_PCT": null
}
]
},

{
"ITEM_NO": 76,
"ITEM_NME": "Test Item 1",
"ITEM_DESC": null,
"ITEM_ICON_URL": null,
"ITEM_PRICE": "1.00",
"ITEM_CATG_CD": 1,
"ITEM_TYP_CD": null,
"ITEM_AVLB_QTY": "98.00",
"ITEM_STAT_CD": null,
"item_fee_list": []
}
],
"success": "yes",
"message": "Success"
}

This is my Javascript code to try and read the JSON data to populate the tables. I tried using value.results.ITEM_NO to access the nested data but that did not solve the problem. What I'm I doing wrong?

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">

  <table class="table table-bordered table-striped" id="items_table"> 
          <tr>
              <th class="text-center">item no.</th>
              <th class="text-center">item name</th>
              <th class="text-center">item desc </th>

              <!-- <th class="text-center">icon url</th> -->
              <th class="text-center">item price </th>
              <th class="text-center">item ctg cd</th>

              <th class="text-center">item typ cd</th>
              <th class="text-center">item avail qqty</th>
              <th class="text-center">item stat cd</th>

          </tr>

        </table>

      </div>
</div>


<script type="text/javascript">
    $.getJSON("URL", function(data) {

        var items_table = '';
        $.each(data, function(key, value) {

            items_table += '<tr>';

            items_table += '<td>' + value.ITEM_NO + '</td>';
            items_table += '<td>' + value.ITEM_NME + '</td>';
            items_table += '<td>' + value.ITEM_DESC + '</td>';

            // items_table += '<td>' +value.ITEM_ICON_URL+ '</td>';
            items_table += '<td>' + value.ITEM_PRICE + '</td>';
            items_table += '<td>' + value.ITEM_CATG_CD + '</td>';

            items_table += '<td>' + value.ITEM_TYP_CD + '</td>';
            items_table += '<td>' + value.ITEM_AVLB_QTY + '</td>';
            items_table += '<td>' + value.ITEM_STAT_CD + '</td>';



            items_table += '</tr>';


        });

        $('#items_table').append(items_table);


    });
</script>

Answer 1

you have to loop over data.result , as you can see result is the main key which contains the array

$.each(data.result, function(i,row){
     items_table += '<td>' + row.ITEM_NO + '</td>';
     items_table += '<td>' + row.ITEM_NME + '</td>';
     //.....
});