在HTML中顯示JSON數據

我正在開發使用英特爾XDK的混合應用程序。在應用程序中，我使用ajax請求到我的PHP服務器。服務器將使用json數據進行響應。在HTML中顯示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> 
    <? 
    }

所以我想，如果有可能以HTML像我在PHP沒有顯示出來。感謝幫助。

編輯：我在客戶端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); 
      } 
     }); 
    });

來源

2016-07-07 c.k

我很困惑你的問題。你說PHP服務器輸出JSON，但你的樣本包含PHP來輸出HTML？ – mulquin

只有html不可用，您可以使用ajax和循環來獲得期望的效果 – madalinivascu

您是否向第三方服務器請求數據，並在您的頁面中使用PHP和HTML？ –

服務器應該提供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>

來源

2016-07-07 05:08:47 Iceman

謝謝你。我會試試這個。 –

我的代碼出錯了。 'data.forEach不是函數' –

@ c.k你做了ajax嗎？我還沒有在那裏寫ajax – Iceman

在HTML中顯示JSON數據

回答

相關問題