I have a small question in JS / JSON. I will need to make selects whose data would depend on the previous ones. Let me explain :

I have a JSON "type" which has in data:

[
  {
    "id": 0,
    "title": "fruit"
  },
  {
    "id": 1,
    "title": "vegetables"
  },
  {
    "id": 2,
    "title": "meat"
  },
]

I have a second "food" which has data:

[
  {
    "id": 0,
    "title": "apple",
    "typeId": 0
  },
  {
    "id": 1,
    "title": "strawberry",
    "typeId": 0
  },
  {
    "id": 2,
    "title": "chicken",
    "typeId": 2
  },
  {
    "id": 3,
    "title": "beef",
    "typeId": 2
  },
]

And a last one "specie" with these data :

[
  {
    "id": 0,
    "titre": "green",
    "foodId": 0
  },
  {
    "id": 1,
    "titre": "red",
    "foodId": 1
  }
]

I would like three input selects in my HTML.

The first will list the types, and depending on which one I choose I'll want the data from the second select to fit. For example if I choose "fruit" I would like to have in my second input select "apple" and "strawberry". The third input will also change depending on the data of the second. So if I select "apple" we will have the choice between "green" and "red"

How could I get this result in JS?

Thanks in advance !

CodePudding user response：

Not the most elegant, as I kept is basic to convey the solution. However, I believe this is what you require.

It is annotated in detail via comments to explain the logic.

// Load our JSON values.
let types = [
  {
    "id": 0,
    "title": "fruit"
  },
  {
    "id": 1,
    "title": "vegetables"
  },
  {
    "id": 2,
    "title": "meat"
  },
];

let foods = [
  {
    "id": 0,
    "title": "apple",
    "typeId": 0
  },
  {
    "id": 1,
    "title": "strawberry",
    "typeId": 0
  },
  {
    "id": 2,
    "title": "chicken",
    "typeId": 2
  },
  {
    "id": 3,
    "title": "beef",
    "typeId": 2
  },
];

// Function to load the values.
function loadTypes() {

  // Lets find our select control for the types.
  let typeSelector = document.getElementById("types");

  // For each of the type values.
  for (let t = 0; t < types.length; t  ) {

    // Lets get the type.
    let type = types[t];

    // Lets add an option.
    var option = document.createElement("option");

    // Lets set it's properties.
    option.value = type.id;
    option.text = type.title;

    // Lets add this as an option to the typeSelector.
    typeSelector.add(option);
  }
}

// Function we can call onchange of selection.
function loadFoods(typeSelected) {

  // Lets find our select control for the foods.
  let foodSelector = document.getElementById("foods");

  // Remove all previous options.
  while (foodSelector.options.length > 0) {
    foodSelector.options.remove(0);
  }

  // For each of the food values.
  for (let t = 0; t < foods.length; t  ) {

    // Lets get the food.
    let food = foods[t];

    // Lets see if it is of the same type.
    if (food.typeId == typeSelected) {

      // Lets add an option.
      var option = document.createElement("option");

      // Lets set it's properties.
      option.value = food.id;
      option.text = food.title;

      // Lets add this as an option to the foodSelector.
      foodSelector.add(option);
    }
  }
}

// Call our default function to load the types.
loadTypes();

p {
  display: grid;
  line-height:1.5em;
}

.select {
  width: 100px
}

<div >
  <p>
    Select a type of food:
    <select id="types"  onchange="loadFoods(this.value)">
      <option value="">Please select</option>
    </select>
  </p>

  <p>
    Select a food from that type:
    <select id="foods" ></select>
  </p>
</div>

CodePudding user response：

The code is a little bit hardcoded, so you may automatize it a little. Hope this works for you:

    <button id="fruitbutton">fruit</button>
    <button id="vegetablesbutton">vegetables</button>
    <button id="meatbutton">meat</button>
    <script>
        var type = [{
            "id": 0,
            "title": "fruit"
        },
        {
            "id": 1,
            "title": "vegetables"
        }, {
            "id": 2,
            "title": "meat"
        }
        ]

        var food = [{
            "id": 0,
            "title": "apple",
            "typeId": 0
        },
        {
            "id": 1,
            "title": "strawberry",
            "typeId": 0
        },
        {
            "id": 2,
            "title": "chicken",
            "typeId": 2
        },
        {
            "id": 3,
            "title": "beef",
            "typeId": 2
        },
        ]

    document.getElementById("fruitbutton").onclick = () => {
    var selected = 0;
    selectnextbuttons(selected);
    }

    document.getElementById("vegetablesbutton").onclick = () => {
    var selected = 1;
    selectnextbuttons(selected);
    }

    document.getElementById("meatbutton").onclick = () => {
    var selected = 2;
    selectnextbuttons(selected);
    }

    function selectnextbuttons(selected) {
    var lengthfoodjson = Object.keys(food).length
    for (var i = 0; i < lengthfoodjson; i  ) {
        if (food[i].typeId == selected) {
        console.log(food[i].title)
        } else {
        //console.log("nothing")
        }
    }
    }
</script>

I've put the scenario where you have to consult only the food json, not the specie one too (just to simplify the code).

When each button is clicked, you stablish a variable where you put the id name of each one, then call the function with the variable.

This function will detect which is de typeID corresponding with the variable (which has inside the number of the ID from the type json) and will print on the console the names corresponding with that typeID. On this console function you can insert the code you need to do (like creating the new buttons with the different options and so).

Then do the exact same process but with the specie json.

Hope it helped, any doubt just consult!