Блог

Использование этого ввода json:

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

У меня есть два выпадающих списка выбора, в первом выпадающем списке я получаю имена таблиц из моего файла json, Поэтому в первом выпадающем списке есть значения data, data1, data2 и т. Д., И пользователь выберет таблицу, выбрав ее «Имя таблицы». В моем втором выпадающем списке мне нужны только идентификаторы атрибутов из ранее выбранного имени таблицы из первого выпадающего списка. Я застрял на этой части, поскольку она по-прежнему выполняет итерации по всему набору данных, а не только по атрибутам отдельных данных.
Это неверно, но это то, что у меня есть в настоящее время, оно просто получает первый атрибут для всех моих наборов данных

 $(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  ;
        });
    });
});
  

Вы можете использовать .filter для фильтрации вашего массива json на основе значения, которое пользователь выбрал из первого выпадающего списка, в зависимости от этого get required attributes и перебирать его, а затем добавлять параметры с required 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>