javascript - 可折叠的 JSON 内容

Question

这个问题已经有答案了:

Populating jQuery Mobile ListView with local JSON data (1 个回答)

已关闭 8 年前。

我对 jQuery 很陌生，我正在使用 jQuery mobile 1.4.3 制作一个可折叠的应用程序来显示 JSON 数据。

JSON 数据:

{
    "ingredients": {
        "sugar": 10,
        "salt": 10,
        "pepper": 10,
        "milk": 10,
        "banana": 10,
        "bacon": 10,
        "olive oil": 10,
        "pork": 10,
        "creams": 10
    }
}

问题是我无法从 JavaScript 动态生成可折叠的内容。

这是我的尝试:

HTML:

<div data-role="collapsible">
  <ul data-role="listview"  id="listIngredients" data-theme="b"></ul>
</div>

JavaScript:

var map = response.ingredients;
$.each(map, function(key, value) {
  console.log(key + ': ' + value);
  $('#listIngredients').append('<li>Title:' + key + value + '</li>');
});

Answer 1

您是否尝试添加 data-enhanced="true"以使代码变为:

<div data-role="collapsible" data-enhanced="true">
    <ul data-role="listview"  id="listIngredients" data-theme="b">
    </ul>
</div>