Javascript 使用jQuery循环对象数组时的混淆

我有这样的数据

var menuItems = {  
   "titles":[  
      {  
         "title_id":"Chief Information Officer (CIO)",
         "title_name":"Chief Information Officer (CIO)"
      },
      {  
         "_title_id":"Chief Technology Officer (CTO)",
         "title_name":"Chief Technology Officer (CTO)"
      }
   ],
   "skills":[  
      {  
         "skill_id":1000185,
         "skill_name":"ITSoftware Development"
      },
      {  
         "skill_id":1000186,
         "skill_name":"Network Security"
      }
   ]
};

我想循环遍历所有数据，并将值附加到选择框选项值和名称中。对于测试，我使用以下jQuery

$.each(menuItems, function (key, value) {
        {
            if (key == "titles") {
                $.each(value, function (key1, value1) {

                    for(k in value1) {
                       $('.title-append').append($('<option>', {
                                                value: value1[k],
                                                text: value1[k]
                       }));

                    }
                })
            }
        }
        });

$。每个（菜单项、函数（键、值）{
{
如果（键==“标题”）{
$.each（值，函数）（键1，值1）{
对于（k值1）{
$（'.title append'）。append（$（''）{
值：value1[k]，
文本：value1[k]
}));
}
})
}
}
});

HTML代码：

<select name="position" class="form-control title-append" id="position"><option value="">Select..</option></select>

选择。。

所有值在“选择”框中追加两次。我被困在这里，我尝试过不同的案例，但似乎没有任何效果。jQuery有什么问题吗

---

因为您只处理标题，所以应该只迭代

菜单项。标题

而不是整个

菜单项

对象：

menuItems.titles.forEach(function(title) {
    $('.title-append').append($('<option>', {
        value: title.title_id,
        text: title.title_name,
    }));
});

menuItems.titles.forEach（函数（标题）{
$（'.title append'）。append（$（''）{
值：title.title\u id，
文本：title.title\u名称，
}));
});

简化对json的迭代

只要您迭代特定的键“titles”，就可以通过提供它作为要迭代的数组来直接迭代它

$.each(menuItems['titles'], function(key, value) {
    $('.title-append').append($('<option>', {value: value['title_id'],text: value1['title_name']}));
});

$。每个（菜单项['titles]，函数（键，值）{
$（'.title append'）.append（$（''，{value:value['title\u id']，text:value1['title\u name']}）；
});

您不需要使用内部for循环，因为value1对象已经有2个对象，而for with each将循环到4，请尝试这种方法

$（函数（）{
var menuItems={
“标题”：[
{  
“职务id”：“首席信息官（CIO）”，
“职务名称”：“首席信息官（CIO）”
},
{  
“职务id”：“首席技术官（CTO）”，
“职务名称”：“首席技术官（CTO）”
}
],
“技能”：[
{  
“技能id”：1000185，
“技能名称”：“IT软件开发”
},
{  
“技能id”：1000186，
“技能名称”：“网络安全”
}
]
};
$.each（菜单项、函数（键、值）{
{
如果（键==“标题”）{
$.each（值，函数）（键1，值1）{
$（'.title append'）。append（$（''）{
值：value1.title\u id，
text:value1.title\u name
}));
})
}
如果（关键=“技能”）{
$.each（值，函数）（键1，值1）{
$（'.student append'）。append（$（''）{
值：value1.skill\u Id，
文本：value1.skill\u名称
}));
})
}
}
});
})

选择。。
选择..

无需jQuery：

var menuItems={
“头衔”：[{
“职务id”：“首席信息官（CIO）”，
“职务名称”：“首席信息官（CIO）”
},
{
“职务id”：“首席技术官（CTO）”，//{
var option=document.createElement（'option'）；//创建一个新选项
option.value=obj.title_id；//设置value属性
option.textContent=obj.title_name；//设置显示内容
dropdown.appendChild（选项）；//附加到文档
})；

选择。。

你这里没有JSON，只有数组和对象。JSON只是一种字符串/文本格式。当你在做

$的时候，上面的每个

都被解析了。为什么有人想在prob有简单解决方案的情况下改变他的结构…？@user7417866也许你投票反对我，因为我使用了一个新帐户？如果是这样，你就被误导了。（1）IE确实支持很多ES6（毕竟它只是ES5的一个扩展，而不是一种全新的语言）；Microsoft Edge将几乎完全支持它（2）没有结构变化VanillaJS更高效，与jQuery一样简单（正如我在上面证明的）不，这不是因为你是新来的，这是因为你建议在不需要的时候改变问题的结构，简单的调整可以解决问题。而且不是所有的用户都会有Edge，它应该至少支持IE10作为标准（如果是这样的话，我对ES6评论表示歉意，我已经删除了它）（3）这是一个演示，我不是在写他的程序，他可以用这个作为他的答案的学习工具，但是箭头函数很容易从

（key=>{…}）

转换到

（function（key）{…}）

（如果他愿意的话）（4）你记下了评论，但从未提出过建议，因为有些东西不完全受支持，这不是一个好的解决方案；语言和浏览器在不同的时间都在更新，你可能永远找不到完全受支持的东西。只是澄清一下@user7417866想劝阻其他人，因为他们的答案不是他的：P抱歉，你这样想