JSON & 动态 jQuery 移动列表视图

Question

我有一个 JSON 文件，其中包含 3 个对象的数组。

当我想显示一个对象的属性时，它会显示它的名称，例如，如果我有一个对象 car，它有一个名为 name 的属性，其值为 "FIAT" 当我写 car.name 时，它会在列表视图而不是 FIAT 上显示“CAR.NAME”。

这是我的代码。

$.getJSON("res/jsonFile/produits.json", function(products) {
    $('#productList').empty();

    $.each(products, function(i, product) {
        $('#productList').append(productLink(product));
    });

    $('#productList').listview('refresh');
});

function productLink(product) {
    var link="<li>" +
        "<img src=product.pic>" +
        "" +
        "<h2>product.name</h2>" +
        "<p>product.desc</p>" +
        "<p>product.price</p>" +
        "</li>";

    return link;
}

这是我的 JSON 文件

[
    {
    "name": "Coca Cola",
    "desc": "Coca Cola",
    "price": 10,
    "qty": 100,
    "pic": "img/coca cola.jpg"
    },
    {
    "name": "Fanta",
    "desc": "Fanta mini",
    "price": 10,
    "qty": 100,
    "pic": "img/fanta.jpg"
    },
    {
    "name": "Salade niçoise",
    "desc": "Salade",
    "price": 15,
    "qty": 100,
    "pic": "img/nicoise.jpg"
    }
]

Answer 1

在您的函数中，您打印的是变量名称，而不是它们的值。像这样使用它：

function productLink(product) {
    var link="<li>" +
        "<img src=" + product.pic + ">" +
        "<h2>" + product.name + "</h2>" +
        "<p>" + product.desc + "</p>" +
        "<p>" + product.price + "</p>" +
        "</li>";

    return link;
}

JSON & 动态 jQuery 移动列表视图

JSON & Dynamic jQuery Mobile Listview

javascript

jquery

json

listview