Question

我想显示我从PHP服务器获取的JSON数组作为HTML列表。我使用的代码循环遍历数组，但是当我用变量替换数组时，它不起作用。

＆＃13;

$(document).ready(function(){
	$(document).bind('deviceready', function(){
		//Phonegap ready
		onDeviceReady();
	});

	var ownproducts = $('#ownproducts');

	$.ajax({
		url: 'MYURL',
		dataType: 'jsonp',
		jsonp: 'jsoncallback',
		timeout: 5000,
		success: 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);
			});
		},
		error: function(){
		   ownproducts.text('Error Message');
		}
	});
});

＆＃13;

所以我得到一个包含数据库数据的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字段包含一个类似["Tomatos","Apples","Mangos","Bananas"]的数组，SQL返回来自单个用户的多个购物清单，我想在卡片上显示每个列表的项目在html列表中的购物清单。

有人有什么建议吗？我很感激帮助。

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东西。您可以使用vanilla 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');
}

将JSON数组显示为html列表

1 个答案: