Question

我从非常简单的代码中获取 JSON 文件中的项目并将其显示在 DIV 中。但是，目前我正在根据数组中的顺序访问每个项目。我想在 JSON 文件中更改订单以及每个项目之外添加IF语句。每个项目也有自己的ID。例如，如果 JSON 文件被更改，data[0].itemName可能会变为data[1].itemName。

(function() {

 'use strict';

 var url = 'path to json';

 $.getJSON(url, function(data) {

            $('#recipeIngredients').html(

            "<ul>" + 
                "<li>" + '1/2 tsp salt' + "</li>" +
                "<li>" + '2 cups ' + (data._id == "1" ? data.itemName : " ") + "</li>" +
                "<li>" + data.itemName + "</li>" +
            "</ul>");

 });

}）（）;

JSON 如下：

var data = [ { "itemName" : "exampleItem1", "_id" : "1" }, { "itemName" : "exampleItem2", "_id" : "2" } ]

Answer 1

测试此示例

＆＃13;

var data = [{
  "id": "1",
  "itemName": "exampleItem1"
}, {
  "id": "2",
  "itemName": "exampleItem2"
}];
var ul = "<ul>";
for (var i = 0; i < data.length; i++) {
  ul += "<li>" + '1/2 tsp salt' + "</li>" +
    "<li>" + '2 cups ' +
    (data[i].id == "2" ? data[i].itemName : " ") +
    "</li>" +
    "<li>" + data[i].itemName + "</li>";

}
ul += "</ul>";
document.body.innerHTML = ul;

＆＃13;

var data = [{
  "id": "1",
  "itemName": "exampleItem1"
}, {
  "id": "2",
  "itemName": "exampleItem2"
}];
var ul = "<ul>";
for (var i = 0; i < data.length; i++) {
  ul += "<li>" + '1/2 tsp salt' + "</li>" +
    "<li>" + '2 cups ';
//if statement should like this
if(data[i].id == "2") ul += data[i].itemName;
//add else if you want
else ul += "_ _ _";

  ul += "</li>" +
    "<li>" + data[i].itemName + "</li>";

}
ul += "</ul>";
document.body.innerHTML = ul;

＆＃13;

Answer 2

我认为你是从错误的角度来解决这个问题。

您的数据结构当然应该包含每个食谱项目的数量（和度量单位）吗？一个只能显示需要2杯特定成分的配方的系统将非常不灵活！

假设您控制JSON结构的内容，类似下面的内容会更好：

var data = [{"id": "1", "itemName": "salt", "itemQty": "1/2 tsp"},
            {"id": "2", "itemName": "flour", "itemQty": "2 cups"},
            {"id": "3", "itemName": "Eggs", "itemQty": "2"}];

document.write("<ul>");
for (var i = 0; i < data.length; i++) {
    document.write("<li>" + data[i].itemQty + " " + data[i].itemName);
}
document.write("<ul>");

然后你的UI代码只是输出给它的数据 - 不需要嵌入逻辑。

想要使用带有JSON的IF语句

2 个答案: