how to loop json object to render data in html-CodePudding

Actually I want to render the data in a table. So I want to loop the value of JSON from the result so that It will add all tr in the table.

so I applied in one value the loop for testing not to the rest of all just for testing. But it is not working. So if you guys can help in the loop issue. Although it is working in index case by giving index number

{
    "response": {
        "status": true,
        "is_batch": false,
        "valid": false,
        "result": {
            "qy": [
                {
                    "ti": "1",
                    "ok_e": "1",
                    "type": "14",
                    "code": "KG",
                    "ok_conversion_table_ti": "13",
                    "base_uom": "Gram",
                    "base_qty": "1000",
                    "status": "1",
                    "created_by": "0",
                    "creation_datetime": "2022-01-08 12:17:46",
                    "trans": [
                        {
                            "ti": "5",
                            "ok_e": "1",
                            "ok_uom_ti": "1",
                            "lang_code": "1",
                            "name": "Kilogram",
                            "status": "1",
                            "created_by": "0",
                            "creation_datetime": "2022-04-19 01:21:24"
                        }
                    ]
                },
                {
                    "ti": "5",
                    "ok_e": "1",
                    "type": "1",
                    "code": "FT",
                    "ok_conversion_table_ti": "1",
                    "base_uom": "Inch",
                    "base_qty": "12",
                    "status": "1",
                    "created_by": "0",
                    "creation_datetime": "2022-09-24 17:40:26",
                    "trans": [
                        {
                            "ti": "6",
                            "ok_e": "1",
                            "ok_uom_ti": "5",
                            "lang_code": "1",
                            "name": "Foot",
                            "status": "1",
                            "created_by": "0",
                            "creation_datetime": "2022-09-24 17:40:26"
                        }
                    ]
                }
            ]
        },
        "context": {
            "self": 1,
            "first": 1,
            "prev": "",
            "next": "",
            "last": 1,
            "size": 5,
            "total": 1
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <table  id="market_data">
        <tr>
            <th>ti</th>
            <th>ok_e</th>
            <th>type</th>
            <th>code</th>
            <th>ok_conversion_table_ti</th>
            <th>base_uom</th>
            <th>base_qty</th>
            <th>status</th>
            <th>created_by</th>
            <th>creation_datetime</th>
        </tr>
        
      </table>
</body>
</html>
<script>
    
    $(document).ready(function(){
        $.getJSON("data.json",function(data){
            var market_value = ' ';
            for( var i = 0 ; i < result.qy.length; i   ){
            $.each(data,function(key,value){
                market_value ='<tr>';  
                    market_value = '<td>' value.result.qy[i].ti '</td>';
                    market_value ='<td>' value.ok_e '</td>';
                    market_value ='<td>' value.type '</td>';
                    market_value ='<td>' value.code '</td>';
                    market_value ='<td>' value.ok_conversion_table_ti '</td>';
                    market_value ='<td>' value.base_uom '</td>';
                    market_value ='<td>' value.base_qty '</td>';
                    market_value ='<td>' value.status '</td>';
                    market_value ='<td>' value.created_by '</td>';
                    market_value ='<td>' value.creation_datetime '</td>'
                    market_value ='</tr>'
            });
            $('#market_data').append(market_value);}}
        );
     
    });
</script>

CodePudding user response：

You need to parse deeper and add to the tbody

 $.getJSON("data.json",process)

Here is a map example using valid HTML

const process = data => {
  const html = data.response.result.qy.map(value => `<tr>
<td>${value.ti}</td>
<td>${value.ok_e}</td>
<td>${value.type}</td>
<td>${value.ok_conversion_table_ti}</td>
<td>${value.base_uom}</td>
<td>${value.base_qty}</td>
<td>${value.status}</td>
<td>${value.base_qty}</td>
<td>${value.created_by}</td>
<td>${value.creation_datetime}</td></tr>`).join("")
  $("#tb").html(html)
};

const process = data => {
  const html = data.response.result.qy.map(value => `<tr>
<td>${value.ti}</td>
<td>${value.ok_e}</td>
<td>${value.type}</td>
<td>${value.ok_conversion_table_ti}</td>
<td>${value.base_uom}</td>
<td>${value.base_qty}</td>
<td>${value.status}</td>
<td>${value.base_qty}</td>
<td>${value.trans[0].name}</td>
<td>${value.created_by}</td>
<td>${value.creation_datetime}</td></tr>`).join("")
  $("#tb").html(html)
};

// test data
 const data = { "response": { "status": true, "is_batch": false, "valid": false, "result": { "qy": [{ "ti": "1", "ok_e": "1", "type": "14", "code": "KG", "ok_conversion_table_ti": "13", "base_uom": "Gram", "base_qty": "1000", "status": "1", "created_by": "0", "creation_datetime": "2022-01-08 12:17:46", "trans": [{ "ti": "5", "ok_e": "1", "ok_uom_ti": "1", "lang_code": "1", "name": "Kilogram", "status": "1", "created_by": "0", "creation_datetime": "2022-04-19 01:21:24" }] }, { "ti": "5", "ok_e": "1", "type": "1", "code": "FT", "ok_conversion_table_ti": "1", "base_uom": "Inch", "base_qty": "12", "status": "1", "created_by": "0", "creation_datetime": "2022-09-24 17:40:26", "trans": [{ "ti": "6", "ok_e": "1", "ok_uom_ti": "5", "lang_code": "1", "name": "Foot", "status": "1", "created_by": "0", "creation_datetime": "2022-09-24 17:40:26" }] } ] }, "context": { "self": 1, "first": 1, "prev": "", "next": "", "last": 1, "size": 5, "total": 1 } } };

// you call this in the success
process(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<table  id="market_data">
  <thead>
    <tr>
      <th>ti</th>
      <th>ok_e</th>
      <th>type</th>
      <th>code</th>
      <th>ok_conversion_table_ti</th>
      <th>base_uom</th>
      <th>base_qty</th>
      <th>other units</th>
      <th>status</th>
      <th>created_by</th>
      <th>creation_datetime</th>
    </tr>
  </thead>
  <tbody id="tb"></tbody>
</table>