将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'); 
}