how can i fetch data json from api to Web app page html

user_12138501 0
Viewed 95

I want to fetch all Jason data into a table How can i do that?

i write code javascript to get json data from my api, but i can't fetch all data like "category" "name" "value" to table in page html !!

api json :

[
    { "allinfo":[ 
    {
    "category": "category1",
    "info": [{
          "name": "Tech1",
          "value": "1575"
       },
       {
          "name": "tech2",
          "value": "a-25"
       }
    ]
 },
 {
    "category": "category2",
    "info": [{
          "name": "Announced",
          "value": "2022"
       },
       {
          "name": "Status",
          "value": "Coming soon"
       }
    ]
 },
 {
    "category": "category3",
    "info": [{
          "name": "with",
          "value": "163.3 cm"
       },
       {
          "name": "Weight",
          "value": "500 g"
       }
    ]
 }]
}]

code javascript :

$.getJSON('https://myapi', function(data) {
  console.log(data);      
  $.each(data, function(index, value) {
    console.log(value);        
    var category = value.allinfo.category;
    var name = value.allinfo.info.name;
    var value = value.allinfo.info.value;        
    $('.output').append('<div class="cont"><h3>' + category + '</h3><table><tbody><tr><td>'+ name +'</td><td>' + value + '</td></tr></tbody></table></div>');});});

html :

<div class="output"></div>

output html:

<div class="cont">
    <h3>undefined</h3>
    <table>
       <tbody>
          <tr>
             <td>undefined</td>
             <td>undefined</td>
          </tr>
          <tr>
            <td>undefined</td>
            <td>undefined</td>
         </tr>
       </tbody>
    </table>
</div>

i want to be like this :

<div class="cont">
    <h3>category1</h3>
    <table>
       <tbody>
          <tr>
             <td>Tech1</td>
             <td>1575</td>
          </tr>
          <tr>
            <td>tech2</td>
            <td>a-25</td>
         </tr>
       </tbody>
    </table>
</div>
 <div class="cont">
    <h3>category2</h3>
    <table>
       <tbody>
          <tr>
             <td>Announced</td>
             <td>2022</td>
          </tr>
          <tr>
            <td>Status</td>
            <td>Coming soon</td>
         </tr>
       </tbody>
    </table>
 </div>
 <div class="cont">
    <h3>category3</h3>
    <table>
       <tbody>
          <tr>
             <td>with</td>
             <td>163.3 cm</td>
          </tr>
          <tr>
            <td>Weight</td>
            <td>500 g</td>
         </tr>
       </tbody>
    </table>
</div>

How can i do that? I appreciate your help

html json javascript
2 Answers

You can access your Obj properties like this:

To get category:

var cat = value[0].allinfo[1].category
console.log(cat) //category2

To get info:

var name = value[0].allinfo[1].info[0].name
console.log(name) //announced

Pay attention: to your variable names, it appears that you name all variables as "name"!

user_149294020

Here is a short way of doing the whole thing in one expression:

const da=[{ "allinfo":[
 {"category": "category1",
  "info":[{"name":"Tech1","value":"1575"},
          {"name":"tech2","value": "a-25"}]},
 {"category": "category2",
  "info":[{"name": "Announced","value": "2022"},
          {"name": "Status","value": "Coming soon"}]},
 {"category": "category3",
  "info":[{"name": "with","value": "163.3 cm"},
          {"name": "Weight","value": "500 g"}]}
]}];

document.querySelector("div.cont").innerHTML=da[0].allinfo.map(cat=>
 `<h1>${cat.category}</h1>
  <table><tbody>${cat.info.map(r=>
  `<tr><td>${r.name}</td><td>${r.value}</td></tr>`).join("")}
  </tbody></table>`).join("\n")
td {border:1px solid grey; width:100px}
table{border-collapse:collapse}
<div class="cont"></div>

There are two (nested) .map()s looping over

  • da[0].categories for all tables using cat for each category and
  • cat.info for all records r in one category

The output of each map() is .join()-ed and the resulting string is assigned to the first encountered div.cont's .innerHTML.

user_26100610
Related