如何将JSON数组转换为HTML表

求指点一下，这是通过api接口打印出来的数据，如何转成HTML的列表形式打印在显示在HTML页面中？

stdClass Object
(
    [code] => 0
    [message] => 
    [data] => Array
        (
            [0] => stdClass Object
                (
                    [id] => 1
                    [name] => Apple
                    [iconUrl] => /img/13.png
                    [logoUrl] => /img/16.png
                    [introduction] => brief introduction
                )

            [2] => stdClass Object
                (
                    [id] => 2
                    [name] => Apple
                    [iconUrl] => /img/13.png
                    [logoUrl] => /img/16.png
                    [introduction] => brief introduction
                )

怎么让他们显示成格式的

<ul>
  <li>1、Apple</li>
  <li>2、Apple</li>
  <li>3、Apple</li>
</ul>

把你的api保存到变量中用遍历生成列表项，在html中加一下这行：

<ul>
    <?php foreach ($data as $item) { ?>
        <li><?php echo $item->id . '、' . $item->name; ?></li>
    <?php } ?>
</ul>

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/673012
• 这篇博客也不错, 你可以看下JSON在HTML页面的常见用法
• 除此之外, 这篇博客: JSON和HTML之间互转实现中的 备注 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• • htmlparser2 通过 npm i htmlparser2 --save 进行安装即可

  原文链接 IT浪子の博客 > JSON和HTML之间互转实现

• 以下回答由chatgpt基于相关博客总结生成:

  可以使用JavaScript来处理这个问题。具体步骤如下：

  1. 首先，从API接口获取JSON数组数据。可以使用AJAX来发送HTTP请求并获取JSON数据。

  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.example.com/data", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var jsonData = JSON.parse(xhr.responseText);
      // 现在你可以在这里处理JSON数据
    }
  };
  xhr.send();
  

  1. 解析JSON数据并生成HTML表格。根据你提供的HTML代码，表格的主体部分是使用tbody元素来包裹的。你可以首先获取该元素的引用，然后开始生成表格行和单元格。

  var tbody = document.getElementById("tbody");
  for (var i = 0; i < jsonData.length; i++) {
    var row = document.createElement("tr");
    for (var key in jsonData[i]) {
      var cell = document.createElement("td");
      cell.innerHTML = jsonData[i][key];
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
  

  1. 将生成的HTML表格插入到页面中。根据你提供的HTML代码，可以使用getElementById方法获取到包含表格的容器元素，然后将生成的表格添加到该容器中。

  var table = document.getElementById("Table");
  table.appendChild(tbody);
  

  完成以上步骤后，你可以将这段JavaScript代码添加到你的HTML页面中，然后运行页面，即可将从API接口获取的JSON数组数据转换成HTML表格形式，并在页面中显示出来。

  请注意，在使用AJAX发送请求时，你需要将URL "https://api.example.com/data" 替换成你实际使用的API接口的URL。另外，根据你的实际需求，可能还需要对JSON数据进行一些处理，例如筛选特定的字段或进行数据转换等。以上代码只是一个基本的示例，你可以根据具体情况进行修改和补充。