Javascript 如何从JSON数组中的特定键获取特定值并在复选框中显示这些值

我正在编写此代码，以获取选中的类别的项目名称和价格值，并将其显示在复选框中，但我失败了。任何协助都将不胜感激。 这是我的剧本

function data() {
var text = '{"DataArray":[{"ItemName":"Salmon Puffs","Price":5,"Category":"Delicious Treats"},{"ItemName":"Beans on Toast Sandwich","Price":200,"Category":"Delicious Treats"},{"ItemName":"Whole Mashed Potatoes","Price":50,"Category":"Delicious Treats"},{"ItemName":"Calamari","Price":20,"Category":"Delicious Treats"},{"ItemName":"Egyptian Decor Pack","Price":300,"Category":"Decoration"},{"ItemName":"Marie Biscuits","Price":80,"Category":"Delicious Treats"},{"ItemName":"Middle Eastern Decor Pack","Price":390,"Category":"Decoration"},{"ItemName":"Star Wars Decor Pack","Price":360,"Category":"Decoration"},{"ItemName":"Hipster Decor Pack","Price":350,"Category":"Decoration"},{"ItemName":"Pears shaped liked Apples","Price":1000,"Category":"Delicious Treats"},{"ItemName":"Flowers","Price":20,"Category":"Decoration"},{"ItemName":"Dance Floor","Price":60,"Category":"Entertainment"},{"ItemName":"Clowns","Price":20.35,"Category":"Entertainment"},{"ItemName":"Fire Dancers","Price":80,"Category":"Entertainment"},{"ItemName":"Cantina Band","Price":2000,"Category":"Entertainment"},{"ItemName":"Improved Salmon Puffs","Price":5,"Category":"Delicious Treats"}]}';

obj = JSON.parse(text);
for (i = 0; i < obj.DataArray.length; i++) {
    if (obj.DataArray[i].Category == $("#txt").val())
    var $ctrl = $('<input/>').attr({ type: 'checkbox', name: 'chk', value: obj.DataArray[i].Price, id: 'chkbox' }).addClass("chk");
    $(".category").append($ctrl).append($("<label for='chkbox'>" + obj.DataArray[i].ItemName + "</label>"));
}

函数数据（）{
var text='{“DataArray”：[{“ItemName”：“鲑鱼泡芙”，“Price”：5，“Category”：“Delicious Treats”}，{“ItemName”：“Beans on Toast Sandwich”，“Price”：200，“Category”：“Delicious Treats”}，{“ItemName”：“Thats”}，{“ItemName”：“Delicious Treats”}，{“ItemName”：“Delicious Treats”}，{“ItemName”：“Delicious“埃及装饰包”，“价格”：300，“类别”：“装饰”}，{“项目名称”：“玛丽饼干”，“价格”：80，“类别”：“美味佳肴”}，{“项目名称”：“中东装饰包”，“价格”：390，“类别”：“装饰”}，{“项目名称”：“星球大战装饰包”，“价格”：360，“类别”：“装饰”}，{“项目名称”：“时髦装饰包”，“价格”：350，“类别”：“装饰”}，{“项目名称”：“梨形苹果”，“价格”：1000，“类别”：“美味佳肴”}，{“项目名称”：“鲜花”，“价格”：20，“类别”：“装饰”}，{“项目名称”：“舞池”，“价格”：60，“类别”：“娱乐”}，{“项目名称”：“小丑”，“价格”：20.35，“类别”：“娱乐”}，{“项目名称”：“消防舞者”，“价格”：80，“类别”：“娱乐”}，{“项目名称”：酒馆乐队，“价格”：2000，“类别”：“娱乐”}，{“项目名称”：“改良鲑鱼泡芙”，“价格”：5，“类别”：“美味佳肴”}]}；
obj=JSON.parse（文本）；
对于（i=0；i

}

这是我的html来显示复选框

<div class="category"></div><input type="text" name="Category" onClick="getItemName();" style="margin:2%;margin-left:3%;cursor:pointer;" id="txt" class="cat" value="Delicious Treats" readonly="readonly">

data（）包含在被调用的getItemName（）中

---

谢谢

您是否尝试过像这样为if语句添加括号

for (i = 0; i < obj.DataArray.length; i++) {
    if (obj.DataArray[i].Category == $("#txt").val()) {
        var $ctrl = $('<input/>').attr({ type: 'checkbox', name: 'chk', value:obj.DataArray[i].Price, id: 'chkbox' }).addClass("chk");
        $(".category").append($ctrl).append($("<label for='chkbox'>" + obj.DataArray[i].ItemName + "</label>"));
    }
}

for（i=0；i

ID必须是唯一的。这意味着，在创建新元素测试之前，如果它已经存在。为了简单地创建新元素，您可以遵循。您可以看到一个示例（使用类和事件处理程序创建一个div，并将此类新元素附加到正文）：

$（“”{
“班级”：“我的部门”，
关于：{
单击：功能（事件）{
//做点什么
}
}
}).附于（“主体”）；

片段：

函数数据（）{
var text='{“DataArray”：[{“ItemName”：“鲑鱼泡芙”，“Price”：5，“Category”：“Delicious Treats”}，{“ItemName”：“Beans on Toast三明治”，“Price”：200，“Category”：“Delicious Treats”}，{“ItemName”：“full Mashed potates”，“Price”：50，“Category”：“Delicious Treats”}，{“ItemName”：“Calamari”，“Price”：20，“Category”：“Delicious Treats”}，{“Delicious Treats”埃及装饰包，“价格”：300，“类别”：“装饰”}，{“项目名称”：“玛丽饼干”，“价格”：80，“类别”：“美味佳肴”}，{“项目名称”：“中东装饰包”，“价格”：390，“类别”：“装饰”}，{“项目名称”：“星球大战装饰包”，“价格”：360，“类别”：“装饰”}，{“项目名称”：“时髦装饰包”，“价格”：350，“类别”：“装饰”}，{项目名称“：“梨形苹果”，“价格”：1000，“类别”：“美味佳肴”}，{“项目名称”：“鲜花”，“价格”：20，“类别”：“装饰”}，{“项目名称”：“舞池”，“价格”：60，“类别”：“娱乐”}，{“项目名称”：“小丑”，“价格”：20.35，“类别”：“娱乐”}，{“项目名称”：“火焰舞者”，“价格”：80，“类别”：“娱乐”}，{“项目名称”：酒馆乐队，“价格”：2000，“类别”：“娱乐”}，{“项目名称”：“改良鲑鱼泡芙”，“价格”：5，“类别”：“美味佳肴”}]}；
obj=JSON.parse（文本）；
对于（i=0；i'）；
}
}
}
}
函数getItemName（）{
数据（）；
}

Ha！！正常工作。谢谢。但是我想阻止它在多次单击时显示多次。那太好了。但是如何使用
将它们显示在新行上我为另一个类别添加了一个新的输入元素，并且我面临显示相关项目名称和价格的挑战。我添加了第二个输入标记的ID，但是我不工作。（o.Category=$（“#txt，#txt1”）.val（）{@Felix这是错误的（o.Category=$（“#txt，#txt1”）.val（）），因为$（“#txt，#txt1”）.val（）返回txt字段的值。您可以改为编写o.Category=$（“#txt”）.val（）&&o.Price=$（“#txt1”）.val（）。如果必须匹配，请告诉我

$( "<div/>", {
   "class": "my-div",
   on: {
      click: function( event ) {
         // Do something
    }
  }
 }).appendTo( "body" );