2

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>
blogob
  • 490
  • 5
  • 19
  • 1
    Please click edit, then `[<>]` snippet editor and let us know the expected outcome when you provide a [mcve] – mplungjan Jan 22 '21 at 08:34
  • Within `$.each(arr, function(index, value) {..` `value` is the value of the indexed item, eg `$.each([1,2,3], function(i, v) { v == 1 /* first iteration */ })` - as you're looping `ids` then `value` will be what you `.push`ed in - ie the Group values, or `["groupA", "groupB"]` - try using some basic debugging (eg `console.log(index, value)` / debugger step through / locals) to see what values you're *actually* looking at and you'll see the issue quick enough. In your case you either need to re-find the original value in your original data given an id or push the whole object in the first loop. – freedomn-m Jan 22 '21 at 09:11
  • Yes, thank you, it is what I do, and I always see "undefined" results or only the first iteration of the item.. – blogob Jan 22 '21 at 10:41
  • Hi, can you show excepted output ? – Swati Jan 22 '21 at 14:24

1 Answers1

1

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>
Swati
  • 28,069
  • 4
  • 21
  • 41
  • Thank you so much Swati !!! I tried many ways, and at the end, I realised I was missing semi colon to my .val jquery function (.val instead of .va() )..normal that I had no result!!Thank you !! I edited my question with complete snippet. – blogob Jan 23 '21 at 01:49
  • Glad i helped :) – Swati Jan 23 '21 at 05:45