Filling up a select dropdown with only some values from an array in a json dataset

user_13714408 0
Viewed 87

Using this json input:

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

I have two select dropdowns, in the first dropdown I get the tableNames from my json file, so the first dropdown has values of data, data1, data2, etc and the user would select a table by selecting its "tableName". In my second dropdown I want only the attribute ids from the previously selected tableName from the first dropdown. I am stuck at this part, as it still iterates through the whole dataset instead of just the attributes of a single data. This isn't correct but this is what I currently have, it just gets the first attribute for all of my datasets

$(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++;
        });
    });
});
json ajax javascript
1 Answers

You can use .filter to filter your json array based on the value which user has selected from the first dropdown depending on this get required attributes and loop through it then append options with required ids in second dropdown .

Demo Code :

//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>

user_106064000
Related