jquery 嵌套 json 对象，按类别遍历和创建 select 选项

Question

我正在尝试按类别从嵌套的 json 对象创建 select 选项，但我无法获取该类别下的嵌套对象。

这里有一个 jsfiddle http://jsfiddle.net/2bitcoder/ms6bzjf0/2/ 任何帮助/指导将不胜感激。

var data = 
    [
        {
            "Category": "Action Priority",
            "data": [
                {
                    "ID": 141,
                    "cfg_item": "Urgent",
                    "SortOrder": 1
                },
                {
                    "ID": 142,
                    "cfg_item": "High",
                    "SortOrder": 2
                },
                {
                    "ID": 143,
                    "cfg_item": "Medium",
                    "SortOrder": 3
                },
                {
                    "ID": 144,
                    "cfg_item": "Low",
                    "SortOrder": 4
                }
            ]
        },
        {
            "Category": "Action Status",
            "data": [
                {
                    "ID": 138,
                    "cfg_item": "Open",
                    "SortOrder": 1
                },
                {
                    "ID": 139,
                    "cfg_item": "Closed",
                    "SortOrder": 2
                },
                {
                    "ID": 140,
                    "cfg_item": "On Hold",
                    "SortOrder": 3
                }
            ]
        }
    ];


$.each(data, function (key, val) {
    $.each(val, function (key, val) {
        if (val == 'Action Status') {
            // traverse the child objects and create the select options
            $.each(val, function (key, val) {
                // alert(key + " : " + val);
                $('#edit-Status').append('<option value="' + ID + '">' + cfg_item + '</option>');
            });
        }
        // alert(val);

    });
    if (val == 'Action Priority') {
        // traverse the child objects and create the select options
        $.each(val, function (key, val) {
            // alert(key + " : " + val);
            $('#edit-Priority').append('<option value="' + ID + '">' + cfg_item + '</option>');
        });
    }
//  alert(val);});
});

Answer 1

你不需要那么多层次的循环。在外循环中，只需检查 val.Category。然后在下一个级别中，您需要遍历 val.data，并且需要使用 .ID 和 .cfg_item.

访问这些对象的属性

您应该避免在每个 $.each() 循环中使用相同的变量，这会造成混淆。

var data = 
    [
        {
            "Category": "Action Priority",
            "data": [
                {
                    "ID": 141,
                    "cfg_item": "Urgent",
                    "SortOrder": 1
                },
                {
                    "ID": 142,
                    "cfg_item": "High",
                    "SortOrder": 2
                },
                {
                    "ID": 143,
                    "cfg_item": "Medium",
                    "SortOrder": 3
                },
                {
                    "ID": 144,
                    "cfg_item": "Low",
                    "SortOrder": 4
                }
            ]
        },
        {
            "Category": "Action Status",
            "data": [
                {
                    "ID": 138,
                    "cfg_item": "Open",
                    "SortOrder": 1
                },
                {
                    "ID": 139,
                    "cfg_item": "Closed",
                    "SortOrder": 2
                },
                {
                    "ID": 140,
                    "cfg_item": "On Hold",
                    "SortOrder": 3
                }
            ]
        }
    ];

$.each(data, function(key, val) {
  switch (val.Category) {
    case 'Action Status':
      target = $('#edit-Status');
      break;
    case 'Action Priority':
      target = $('#edit-Priority');
      break;
    default:
      target = null;
  }
  if (target) {
    $.each(val.data, function(key2, item) {
      target.append('<option value="' + item.ID + '">' + item.cfg_item + '</option>');
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="edit-Status"></select>
<br>
<select id="edit-Priority"></select>

Answer 2

对此进行了一些评论，以帮助您了解您偏离轨道的地方

// loop outer array, each object in array has 2 properties `Category (string)` and `data (array)`
$.each(data, function (idx, obj) {
    var $select;
    // category determines which `select` element
    if (obj.Category == 'Action Status') {
        $select = $('#edit-Status');
    } else {
        $select = $('#edit-Priority');
    }
    // option parsing is the same for both types

    // loop over the `data` property array
    $.each(obj.data, function (dataIndex, dataObj) {           
        var option = '<option value="' + dataObj.ID + '">' + dataObj.cfg_item + '</option>'
        $select.append(option);
    });
});

假设您只有 2 个类别

DEMO

jquery 嵌套 json 对象，按类别遍历和创建 select 选项

jquery nested json object, traversing and creating select options by category

jquery

select

json

nested