how to store items from a json dropdown list

Question

I am trying to select store or validate multiple items from a dropdown list but I don't how to do it. let me explain what I am trying to do... I have food quality into a json list

   <select id="locality-dropdown" name="locality" multiple="multiple" size="2">
    </select>

<script>
    var Food = //4 elements json format 
        [
           {
              "name": "food1",
              "Glc": 2,
              "Lip": 0.2,
              "Prot": 0.5,
              "IG": 20
            },
           {
              "name": "food2",
               "Glc": 4,
              "Lip": 1.2,
              "Prot": 0.7,
              "IG": 40
           },
           {
              "name": "food3",
              "Glc": 5,
              "Lip": 0.32,
              "Prot": 0.76,
              "IG": 60
           },
           {
              "name": "food4",
               "Glc": 7.5,
              "Lip": 1.5,
              "Prot": 1.3,
              "IG": 80
           }       
        ];

then I put this list in a dropdown format :

    let dropdown = document.getElementById('locality-dropdown');
    dropdown.length = 0;
    let defaultOption = document.createElement('option');
    defaultOption.text = 'Choose Food';
    
    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;
    
        let option;
        for (let i = 0; i<Food.length; i++) {
          option = document.createElement('option');
          option.text = Food[i].name;
          option.value0 = Food[i].Glc;
          option.value1 = Food[i].Lip;
          option.value2 = Food[i].Prot;
          option.value3 = Food[i].IG;
          console.log(option.value0,option.value1,option.value2,option.value3)
          dropdown.add(option);}
</script>

At that point I have a nice dropdown list box with food1 , food2, food3, food4 inside.

voila! and now what to do ?!

I need to select some of them and from these selected items, use the numbers of the list shown above to follow my math such as sum of Glc, sum of Lip etc.

I don't know if I am clear enough but let say I choose food1 and food3, then because I am choosing them, it will return later, when needed : Glc of food1 + Glc of food3 ; Lip of food1 + Lip of food3 etc - if 3 elements are selected so the same process with 3 elements. I don't know how to write the code and which technic to use whether an other json , an array of the the selected elements to do so...?

Answer 1

Try to make a checkbox list instead of a dropdown list:

var Food = //4 elements json format 
  [{
      "name": "food1",
      "Glc": 2,
      "Lip": 0.2,
      "Prot": 0.5,
      "IG": 20
    },
    {
      "name": "food2",
      "Glc": 4,
      "Lip": 1.2,
      "Prot": 0.7,
      "IG": 40
    },
    {
      "name": "food3",
      "Glc": 5,
      "Lip": 0.32,
      "Prot": 0.76,
      "IG": 60
    },
    {
      "name": "food4",
      "Glc": 7.5,
      "Lip": 1.5,
      "Prot": 1.3,
      "IG": 80
    }
  ];
for (var i=0;i<Food.length;i++){
CurrentFood=Food[i]
var input=document.createElement("input")
input.type="checkbox"
input.id=CurrentFood.name
var label=document.createElement("label")
label.for=CurrentFood.name
label.innerText=CurrentFood.name
document.body.appendChild(input)
document.body.appendChild(label)
document.body.appendChild(document.createElement("br"))
}

After that, attach an event listener to each checkbox listening for the "change" event. Checkbox Check Event Listener After that, whenever the event fires, find the index from the parent of the ones that are checked, get the indexed arrays from the list, and return Food[index].Glc or Food[index].Lip, or whatever you want.

Answer 2

You have a few options with regard to how you can store the individual data elements corresponding to the list elements in the options value attribute.

1. Use array indices.
2. Transform your data into an object keyed on the name and look it up from that.
3. Convert the data to json and store it in the value attribute. Note: This method would mean that if you updated your Food array after the dropdown was built, then you wouldn't see the updates in the options value attributes. If it needs to update individual properties, don't use this method.

Here I've done it using json. Its trivial to change it to the other two.

<html>
    <body>
        <select id="locality-dropdown" name="locality" multiple="multiple">
        </select>
        <button id="locality-but">Submit</button>
    </body>

<script>
    "use strict"
    const Food = [{
          "name": "food1",
          "Glc": 2,
          "Lip": 0.2,
          "Prot": 0.5,
          "IG": 20
        }, {
          "name": "food2",
           "Glc": 4,
          "Lip": 1.2,
          "Prot": 0.7,
          "IG": 40
       }, {
          "name": "food3",
          "Glc": 5,
          "Lip": 0.32,
          "Prot": 0.76,
          "IG": 60
       }, {
          "name": "food4",
          "Glc": 7.5,
          "Lip": 1.5,
          "Prot": 1.3,
          "IG": 80
       }       
    ];

    const dropdown = document.getElementById('locality-dropdown');
    const defaultOption = document.createElement('option');
    defaultOption.text = 'Choose Food';
    defaultOption.disabled = true;
    
    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;
    
    document.getElementById('locality-but').addEventListener('click', (event) => {
        console.log('click');
        const dd = document.getElementById('locality-dropdown');
        const result = [];
        for(let i = 0; i < dd.options.length; i++) {
            const option = dd.options[i];
            
            if(option.selected) {
                result.push(JSON.parse(option.value));
            }            
        }
        console.log("do something with \n", result);
    })
    
    for (let food of Food) {
        const option = document.createElement('option');
        option.text = food.name;
        option.value = JSON.stringify(food);
        dropdown.add(option);
    }
</script>
    
</html>

At the end of the event listener you have an array called result which has the data for all selected options. You should be able to adapt this to fit your needs.