Question

形式：

<select name="apps[]" class="selecter" multiple>
    <optgroup label="App Name">
        <option value="1|1">App Name : Category</option>
        <option value="1|2">App Name : Category</option>
        <option value="1|3">App Name : Category</option>
    </optgroup>
</select

我有一个JSON对象（这是它在控制台日志中的外观）

{"apps":[{"value":"1|1","app_name":"Appen","member_name":"Riven"},{"value":"1|2","app_name":"Appen","member_name":"Filler"},{"value":"1|3","app_name":"Appen","member_name":"Mello"}]} 


console.log(JSON.stringify(data) );

我想用表格中的json数据填写表格，其中App Name为＆＃34; app_name＆＃34;，＆＃34; member_name＆＃34;是＆＃34;类别＆＃34;价值显然是价值。

这个json对象还可以包含多个＆＃34; app＆＃34;这意味着，它可能看起来像最终结果：

<select name="apps[]" class="selecter" multiple>
    <optgroup label="App Name">
        <option value="1|1">App Name : Category</option>
        <option value="1|2">App Name : Category</option>
        <option value="1|3">App Name : Category</option>
    </optgroup>
    <optgroup label="App Name 2">
        <option value="2|1">App Name 2 : Category</option>
        <option value="2|2">App Name 2 : Category</option>
    </optgroup>
</select>

Form已经生成了其他数据，这就是为什么我需要替换它，而不是从一开始构建它（json调用稍后完成）

我想我需要使用一些循环以某种方式浏览每个项目，

我尝试过：

    $( data ).each(function( value, etc ) {

            console.log(value);
            console.log(etc);

        });

但它给了我一些奇怪的结果：

Object {apps: Array[3]}
apps: Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]
__proto__: Object

如何使用给定的数据（JSON）填写上面的表格？

成功循环：

for(var i=0; i<data.apps.length; i++){
console.log(data.apps[i]);
}

我给了＆＃34;选择＆＃34;一个id，所以我可以删除所有内容：

        if (data.apps.length > 0) {

            $('#selectapps').html(' ');

            for(var i=0; i<data.apps.length; i++){

            }
        }

Answer 1

这是循环json对象数据的方法：

$.each(result.apps, function(i, item) {
     console.log(item.value);
     console.log(item.app_name);
     console.log(item.member_name);
});

Answer 2

您使用的迭代功能有几个缺陷。第一个$().each旨在迭代jQuery对象（通常从DOM生成），但是您处理常规对象。因此，$ .each更好（见https://api.jquery.com/jQuery.each/）。

现在，您不想迭代整个数据对象，而只是迭代应用程序。因此，以下内容应该更好：

$.each(data.apps, function (index, value) {
    console.log(value.value);
    console.log(value.app_name);
    console.log(value.member_name);
});

基于此，您可以创建表单。

粗略的草稿你可以在这里找到： http://jsfiddle.net/yCxDn/1/

我认为你应该能够从中找出细节。

将JSON数据填充到选择表单

2 个答案: