將JSON數組顯示爲html列表

Question

我想顯示我從PHP服務器獲取的JSON數組，作爲HTML中的列表。我使用的代碼循環遍歷數組，但是當我用變量替換數組時它不起作用。

$(document).ready(function(){ 
 
\t $(document).bind('deviceready', function(){ 
 
\t \t //Phonegap ready 
 
\t \t onDeviceReady(); 
 
\t }); 
 

 
\t var ownproducts = $('#ownproducts'); 
 

 
\t $.ajax({ 
 
\t \t url: 'MYURL', 
 
\t \t dataType: 'jsonp', 
 
\t \t jsonp: 'jsoncallback', 
 
\t \t timeout: 5000, 
 
\t \t success: function(data, status){ 
 
\t \t \t $.each(data, function(i,item){ 
 
\t \t \t \t var products = '<br>'+item.item; 
 
\t \t \t \t  var ul = $('<ul>').appendTo('body'); 
 
\t \t \t \t var json = { items: ['Banana','Cherry','Apple','Strawberry','Pear','Pineapple'] }; 
 
\t \t \t \t $(json.items).each(function(index, item) { 
 
\t \t \t \t \t ul.append($(document.createElement('li')).text(item)); 
 
\t \t \t \t }); 
 

 
\t \t \t \t 
 
\t \t \t 
 
\t \t \t \t ownproducts.append(products); 
 
\t \t \t }); 
 
\t \t }, 
 
\t \t error: function(){ 
 
\t \t ownproducts.text('Error Message'); 
 
\t \t } 
 
\t }); 
 
});

所以我從我的數據庫中包含數據的JSON文件，item.item包含數組但是當我替換此：

var json = { items: ['Banana','Cherry','Apple','Strawberry','Pear','Pineapple'] }; 

爲：

var json = { items: item.item }; 

或者：

var json = { items: products }; 

它不起作用（不顯示任何JavaScript相關的東西）。

編輯： 我試圖通過PHP

<?php 
header('Content-type: application/json'); 

require 'config.php'; 
$con = mysqli_connect($url,$username,$password,$database); 

// Check connection 
if (mysqli_connect_errno()) 
    { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 

$userid = $_GET['userID']; 


mysqli_select_db($con, $database); 

$sql = "SELECT shoppingListID AS id, shoppingListUserID AS userid, shoppingCheckBox AS checkbox, shoppingItem AS item, shoppingDate AS date 
FROM shoppinglist 
WHERE shoppingListUserID='$userid' 
ORDER BY shoppingDate DESC"; 
$result = mysqli_query($con,$sql) or die ("Query error: " . mysqli_error()); 

$records = array(); 

while($row = mysqli_fetch_assoc($result)) { 
    $records[] = $row; 
} 

mysqli_close($con); 

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');'; 
?> 

的ShoppingItem field包含["Tomatos","Apples","Mangos","Bananas"]的SQL陣列從一個單一的用戶返回多個shoppinglists得到從我的數據庫的一些項目，我想上顯示shoppinglists與列表中的每個列表的項目卡片。

有人有什麼建議嗎？我很感激幫助。

Answer 1

讓我假設你的JSON端點事實上確實返回正確的數據 - 在這種情況下訪問你「已經標示MYURL什麼生成文本（我相信！）：

jsoncallback({"items":["Banana","Cherry","Apple","Strawberry","Pear","Pineapple"]}) 

然後我們可以移動在你的邏輯，其中包括在這個回調函數：？

function (data, status) { 
    $.each(data, function (i, item) { 
     var products = "<br>" + item.item; 
     var ul = $("<ul>").appendTo("body"); 
     var json = { 
      items: ["Banana", "Cherry", "Apple", "Strawberry", "Pear", "Pineapple"] 
     }; 
     $(json.items).each(function (index, item) { 
      ul.append($(document.createElement("li")).text(item)); 
     }); 
     ownproducts.append(products); 
    }); 
} 

什麼是這裏的問題有很多，第一是，你可能不應該是迭代過data，因爲這是不是你的陣列。相反，你應該迭代超過data.items。

第二個是你應該創建HTML而不是創建大量的DOM東西。你可以用香草JS的Array.prototype.map或Array.prototype.join功能，而不是委託這JQuery的：它是JS規範的一部分，這是充分的：

function (data, status) { 
    var html = '<ul><li>' + data.items.join('</li><li>') + '</li></ul>'; 
    $(html).appendTo('body'); 
}