在 HTML 中显示 JSON 数据答案

【问题标题】：Displaying JSON data in HTML在 HTML 中显示 JSON 数据
【发布时间】：2016-11-09 07:29:41
【问题描述】：

我正在使用英特尔 XDK 开发混合应用程序。在应用程序上，我对我的 PHP 服务器使用 ajax 请求。服务器将响应 json 数据。

这是我来自服务器的示例 json。

[{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"date_open":"2015-01-04",
"paid":"1",
"harvested":"",
"reinvest":null,
"profit":null,
"investment":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"date_open":"2015-03-01",
"paid":"1",
"harvested":"",
"reinvest":null,
"profit":null,
"investment":"1500"
}]

这里每个用户的产品数量不同，有些没有产品，有些有 1、2...10 等产品。因此，根据用户的产品数量，展示它们的最佳方式是什么。以便数据/项目在页面加载时全部组织并与图像一起很好地显示。

应该自动显示：

|产品图片 |产品名称 |日期 |利润 |投资

我的 html 页面/css 样式应该设置什么？或者任何我应该了解的更多信息。

在我现有的系统上使用 PHP。我只是使用 foreach 的用户产品。然后是每个将显示数据的类的样式。示例：

 foreach(products as product){
          ?>
          <div class="img"></div>
          <div class="productname">echo product['product'];</div>
    <?
    }

所以我在想是否可以像我在 PHP 中所做的那样在 html 中显示它。感谢您的帮助。

编辑：我在客户端的 ajax 调用：

$("button").click(function(){
        $.ajax({
            type: 'POST',
            url: "http://www.sample.com/app/user-data.php",
            crossDomain: true,
            dataType: 'json',
            data: { user_token: user_token },
            success: function(data, status, jqXHR) {
                //console.log(data); //`this is displaying only as object why?`
                //console.log(status);
                console.log(JSON.stringify(data)); //to string
            },

            error: function(xhr, ajaxOptions, thrownError) {
                alert(ajaxOptions + " " + thrownError);
            }
        });
    });

【问题讨论】：

我对你的问题感到困惑。您说 PHP 服务器输出 JSON，但您的示例包含 PHP 以输出 HTML？
只有html是不行的，你可以使用ajax和循环来获得想要的效果
您是否从 3rd 方服务器请求数据，并在您的页面中使用 PHP 和 HTML？
对不起，混淆了，我有现有的程序（php），现在我正在开发混合应用程序版本（HTML，CSS，jquery）。所以我只是向服务器发送请求以获取用户的数据等。@mulquin
@parag 是的，我正在使用第 3 方服务器。我在服务器上有应用程序请求的 API。我只是在应用程序的客户端使用 HTML、CSS 和 jquery。

标签： php jquery html json hybrid-mobile-app

【解决方案1】：

服务器应该提供像这样的 json：

<?php
$data = array();
foreach(products as product){
    array_push($data, $product);
}
header('Content-Type: application/json');
echo json_encode($data);

您应该通过 ajax 获取数据，然后更新 DOM：

var dummy_data = [{
    "id": "11",
    "user_id": "8000",
    "product": "Shoes A",
    "quantity": "1",
    "date_open": "2015-01-04",
    "paid": "1",
    "harvested": "",
    "reinvest": null,
    "profit": null,
    "investment": "3000"
  },

  {
    "id": "12",
    "user_id": "8000",
    "product": "Shoes B",
    "quantity": "1",
    "date_open": "2015-03-01",
    "paid": "1",
    "harvested": "",
    "reinvest": null,
    "profit": null,
    "investment": "1500"
  }
];

function addData(data) {
  data.forEach(function(row) {
    var str = '<tr>';
    str += '<td>' + row.id + '</td>';
    str += '<td>' + row.product + '</td>';
    str += '<td>' + row.date_open + '</td>';
    str += '<td>' + row.profit + '</td>';
    str += '<td>' + row.investment + '</td>';
    str += '</tr>';
    $('#data_tbl').append(str);
  });
}
$("#fetch_btn").click(function() {
  //do ajax here and load data
  /*
  $.getJSON("get_data.php", function(result) {
    addData(result);
  });
  */
  //for demo calling the function with dummy data
  addData(dummy_data);
});

table,
th,
td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <button id="fetch_btn">FETCH BY AJAX</button>
  <table id="data_tbl">
    <tr>
      <th>image of product</th>
      <th>name of product</th>
      <th>date</th>
      <th>profit</th>
      <th>investment</th>
    </tr>
  </table>
</body>

</html>

【讨论】：

我的代码出错了。 data.forEach is not a function
@c.k 你做了 ajax。我还没有在那里写ajax
@c.k 我也用 ajax 代码更新了答案。看看吧。
我认为我的代码错了。我这样做：paste.ofcode.org/zpU4wCnF3GVmu4Set9hVid
@c.k 删除第 12 行，不需要