我如何从 api 获取数据 json 到 Web 应用程序页面 html

Question

我想将所有 Jason 数据提取到一个表中，我该怎么做？

我编写代码 javascript 从我的 api 中获取 json 数据，但我无法将所有数据（如“类别”、“名称”、“值”）提取到第 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"
       }
    ]
 }]
}]

代码 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>

我想成为这样的：

<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>

我怎样才能做到这一点？ 我感谢您的帮助

Answer 1

您可以像这样访问您的 Obj 属性：

获取类别：

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

获取信息：

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

注意：对于您的变量名，您似乎将所有变量都命名为“名称”！

Answer 2

这是在一个表达式中完成整个事情的一种简短方法：

 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>

有两个（嵌套的） .map()循环

• da[0].categories为每个类别使用cat的所有表和
• 一个类别中所有记录cat.info的r

每个map()的 output 被.join()编辑，结果字符串被分配给第一个遇到的div.cont的.innerHTML 。