Anzeigen von JSON-Daten in HTML

Ich entwickle eine Hybrid-App mit Intel XDK. Auf der App verwende ich eine Ajax-Anfrage an meinen PHP-Server. Der Server antwortet mit JSON-Daten.Anzeigen von JSON-Daten in HTML

Das ist meine Probe json vom Server.

[{ 
"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" 
}]

Die Anzahl der Produkte pro Benutzer hier ist anders, einige haben kein Produkt, einige haben 1, 2 ... 10 usw. Produkte. Also, je nachdem, wie viele Produkte eines Benutzers, , was ist der beste Weg, sie anzuzeigen. So dass die Daten/Elemente alle organisiert und gut mit Bild nach geladener Seite angezeigt werden.

Sollte automatisch angezeigt:

Was sollte meine html-Seite/CSS-Stil-Setup? Oder irgendetwas, worüber ich mehr wissen sollte.

Auf meinem bestehenden System mit PHP. Ich benutze einfach eine foreach Benutzerprodukt. Dann ein Stil für jede Klasse, in der die Daten angezeigt werden. Probe:

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

So denke ich bin, wenn es möglich, es wie in HTML angezeigt werden, was ich in PHP tat. Danke für die Hilfe.

Edit: Meine Ajax-Aufruf in Client-Seite:

$("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); 
      } 
     }); 
    });

Quelle

2016-07-07 c.k

Ich bin durch Ihre Frage verwirrt. Sie sagen, dass der PHP-Server JSON ausgibt, aber dann enthält Ihr Beispiel PHP, um HTML auszugeben? – mulquin

mit HTML ist nur nicht möglich, Sie können Ajax und eine Schleife verwenden, um den gewünschten Efect – madalinivascu

zu erhalten Sie Daten von Drittanbieter-Server anfordern, und verwenden Sie es in Ihrer Seite mit PHP und HTML? –

Server sollte json wie liefern:

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

Sie sollten die Daten von Ajax holen und aktualisieren Sie dann das 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>

Quelle

2016-07-07 05:08:47 Iceman

Vielen Dank dafür. Ich werde es versuchen. –

Ich habe einen Fehler in meinem Code. 'data.forEach ist keine Funktion' –

@ c.k hast du den Ajax gemacht. Ich habe die Ajax dort nicht geschrieben – Iceman

Antwort

Verwandte Themen