JSONデータをHTMLで表示

私は、Intel XDKを使用してハイブリッドアプリケーションを開発しています。アプリケーションで私はPHPサーバーにajaxリクエストを使用しています。サーバーはjsonデータで応答します。JSONデータをHTMLで表示

これはサーバーのサンプル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のユーザープロダクトを使用します。次に、データが表示されるすべてのクラスのスタイル。サンプル：それは可能私はPHPで何をしたかのようなHTMLでそれを表示する場合

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

ので、私は考えています。手伝ってくれてありがとう。

編集：クライアント側での私の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が出力されますが、サンプルにはHTMLを出力するPHPが含まれているとしますか？ – mulquin

とhtmlのみしか使用できません。あなたはajaxとループを使って目的のefectを得ることができます。 – 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

JSONデータをHTMLで表示

答えて

関連する問題