javascript - 仅使用 json 数据集中数组中的一些值填充选择下拉列表

Question

使用这个 json 输入:

[
    {
        "tableName": "data",
        "attributes": [
            {
                "id": "att1"
            },
            {
                "id": "att2"
            },
            {
                "id": "att3"
            },
            {
                "id": "att8"
            }
        ]
    }
]

我有两个选择下拉列表，在第一个下拉列表中，我从我的 json 文件中获取表名，因此第一个下拉列表的值是数据、数据 1、数据 2 等，用户将通过选择其“表名”来选择一个表。在我的第二个下拉列表中，我只需要来自第一个下拉列表中先前选择的 tableName 的属性 ID。我被困在这部分，因为它仍然遍历整个数据集，而不仅仅是单个数据的属性。这是不正确的，但这是我目前拥有的，它只是获取我所有数据集的第一个属性

$(document).ready(function () {
    var url = "listData.json";
    $.getJSON(url, function (data) {
        console.log(data);
        $('#dropdown-1').append('<option selected="true" disabled>Select Data</option>');
        var i = 0;
        $.each(data, function (index, value) {
            // APPEND OR INSERT DATA TO SELECT ELEMENT.
            $('#dropdown-1').append('<option value>' + value.attributes[i].id + '</option>');
            i++;
        });
    });
});

Answer 1

您可以使用 .filter 根据用户从第一个下拉列表中选择的值来过滤您的 json 数组，这取决于此获取所需的 attributes 然后循环遍历它在第二个下拉列表中附加带有所需 ids 的选项。

演示代码:

//your json data
var data = [{
  "tableName": "data1",
  "attributes": [{
      "id": "att1"
    },
    {
      "id": "att"
    },
    {
      "id": "att3"
    },
    {
      "id": "att5"
    }
  ]
}, {
  "tableName": "data2",
  "attributes": [{
      "id": "att"
    },
    {
      "id": "att2"
    },
    {
      "id": "att3"
    },
    {
      "id": "att8"
    }
  ]
}]
$('#dropdown-1').append('<option selected="true" disabled>Select Data</option>');
var i = 0;
$.each(data, function(index, value) {
  // APPEND OR INSERT DATA TO SELECT ELEMENT.
  $('#dropdown-1').append('<option value=' + value.tableName + '>' + value.tableName + '</option>');

});
//on change of 1st dropdown 
$(document).on('change', '#dropdown-1', function() {
  var value = $(this).val(); //get value

  //filter json array
  var attribute = $(data)
    .filter(function(i, n) {
      return n.tableName === value;
    });
  //empty second dropdown
  $('#dropdown-2').html("");
  $('#dropdown-2').append('<option selected="true" disabled>Select attributes</option>');
  //loop through attribute
  $.each(attribute[0].attributes, function(index, value) {
    //append datas
    $('#dropdown-2').append('<option value=' + value.id + '>' + value.id + '</option>');


  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown-1"></select>

<select id="dropdown-2"></select>