Mutliple dynamic fields with jquery

I have a series of div or input, and all data are pulled from a JSON file.

Here is an example of the structure : group - groupItem - itemSpec- itemSpec2

{
    "Group": "groupA",       
    "Item": "groupA-item1",
    "Spec1": "item1-spec1",
    "Spec2": "item1-spec2"
    },
    {
    "Group": "groupB",       
    "Item": "groupB-item1",
    "Spec1": "groupB-item1-spec1",
    "Spec2": "groupB-Item1-spec2"
    },
    "Group": "groupA",       
    "Item": "groupA-item1",
    "Spec1": "groupA-Item1-spec1",
    "Spec2": "groupA-Item2-spec2"
    },

So I can have several groupA or groupB, and have several items coming from the same group.

I tried to pull out all groups in the first select field, with a function to avoid duplicates

let dropdown = $('#group');
  let input1 = $('#item');
  let input2 = $('#spec1');
  let input3 = $('#spec2');


  dropdown.empty();
  dropdown.append('<option selected="true" class="reset">Choose a group</option>');
  const url = 'interaction.json';
  $.getJSON(url, function(data) {
    var ids = []; 
    $.each(data, function (key, entry) {
      if($.inArray(entry.Group, ids) === -1){
        ids.push(entry.Group);
        dropdown.append($('<option></option>').attr('value', entry.Group).text(entry.Group));
      }
    });

It gives me a list of all groups, without duplicates.

What I want now, is to pull out all item related to the selected group.I tried many ways, but can't find a solution.

I tried for example :

  $('#group').change(function()  {
  group = $(this).val();
  input1.empty();
  input1.append('<option selected="true" class="reset">Choose an item</option>');

 $.each(ids, function(index, value) {
  input1.append("<option>" + value[1] + "</option>");
});
 });

Or with :

    $('#group').change(function()  {
  var i = this.selectedIndex; 
   i = i - 1;
      input1.empty();
   input1.append('<option selected="true" class="reset">Choose an item</option>');

     $.each(ids, function(index, value) {
      input1.append("<option>" + value[i].Item+ "</option>");
    });
   });

It gives me a list of "undefined"...can anyone help ? (I cannot use the editor because I 'm using a JSON file...)

Ok here is a more visual example with a simple js array.This snippet contain the solution gived by Swati !

var data = [{
    "Group": "groupA",
    "Item": "groupA-item1",
    "Spec1": "item1-spec1",
    "Spec2": "item1-spec2"
  },
  {
    "Group": "groupB",
    "Item": "groupB-item1",
    "Spec1": "groupB-item1-spec1",
    "Spec2": "groupB-Item1-spec2"
  }, {
    "Group": "groupA",
    "Item": "groupA-item2",
    "Spec1": "groupA-Item1-spec1",
    "Spec2": "groupA-Item2-spec2"
  }
]
let dropdown = $('#group');
let input1 = $('#item');
let input2 = $('#spec1');
let input3 = $('#spec2');
dropdown.empty();
dropdown.append('<option selected="true" class="reset">Choose a group</option>');
var ids = [];
$.each(data, function(key, entry) {
  if ($.inArray(entry.Group, ids) === -1) {
    ids.push(entry.Group);
    dropdown.append($('<option></option>').attr('value', entry.Group).text(entry.Group));
  }
});

$('#group').change(function() {
  group = $(this).val();
  input1.empty();
  input1.append('<option selected="true" class="reset">Choose an item</option>');
  //filter your json..get only json array where group matchs
  var items = $(data)
    .filter(function(i, n) {
      return n.Group === group;
    });
  //add to your options
  $.each(items, function(index, value) {
    console.log(value.Item)
    input1.append("<option>" + value.Item + "</option>");
  });
});

$('#item').change(function()  {
    si_group = $(this).val(); 
    var selected_items = $(data).filter(function(i, n) {
    return n.Item === si_group;
  });
  $.each(selected_items, function(index, value) {
   input2.text(value.Spec1);
   input3.text(value.Spec2);
  });
  

});

.select_group{
  display:flex;
  flex-direction:column;
}
#spec1,#spec2{
  display:inline-block;
  border:1px solid #eee;
}
label{
  font-weight:bold
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_group">
                                
                                 <div>
                                    <label for="group" class="flex j-center a-center"> Group | </label>
                                    <select id="group" name="group"></select>
                                </div>
                                 <div>
                                    <label for="item" class="flex j-center a-center"> Item | </label>
                                        <select id="item" name="medoc"></select>
                                </div>
                                <div>
                                    <label for="spec1" class="flex j-center a-center"> Item spec1 :</label>
                                    <div id="spec1" type="text" class=""></div>
                                </div>
                                <div>
                                    <label for="spec2" class="flex j-center a-center"> item spec2 :</label>
                                    <div id="spec2" class="">
                                        <span class="icon"></span>
                                    </div>
                                </div>

                            </div>

Solution

You can use filter to filter your JSON Array and get only matching values array and then simply loop through the filter arrays and add value to your select-box.

Demo Code :

var data = [{
    "Group": "groupA",
    "Item": "groupA-item1",
    "Spec1": "item1-spec1",
    "Spec2": "item1-spec2"
  },
  {
    "Group": "groupB",
    "Item": "groupB-item1",
    "Spec1": "groupB-item1-spec1",
    "Spec2": "groupB-Item1-spec2"
  }, {
    "Group": "groupA",
    "Item": "groupA-item1",
    "Spec1": "groupA-Item1-spec1",
    "Spec2": "groupA-Item2-spec2"
  }
]
let dropdown = $('#group');
let input1 = $('#item');
dropdown.empty();
dropdown.append('<option selected="true" class="reset">Choose a group</option>');
var ids = [];
$.each(data, function(key, entry) {
  if ($.inArray(entry.Group, ids) === -1) {
    ids.push(entry.Group);
    dropdown.append($('<option></option>').attr('value', entry.Group).text(entry.Group));
  }
});

$('#group').change(function() {
  group = $(this).val();
  input1.empty();
  input1.append('<option selected="true" class="reset">Choose an item</option>');
  //filter your json..get only json array where group matchs
  var items = $(data)
    .filter(function(i, n) {
      return n.Group === group;
    });
  //add to your options
  $.each(items, function(index, value) {
    console.log(value.Item)
    input1.append("<option>" + value.Item + "</option>");
  });
});
//same do for other selects

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