javascript - display json data into select option

Question

When I click the select option the result is that all the data is being combined into one row. I want to change it so that the data would fill each row from select option.

Any suggestions on what code I should change or add? Is it from the loop or do I need to create a dynamic id for the select option?

var json = {
  "Food": [{
    "id": "1",
    "name": "Fried Rice",
    "price": "10.000"
  }, {
    "id": "2",
    "name": "Fried Noodle",
    "price": "9.000"
  }, {
    "id": "3",
    "name": "Pancake",
    "price": "8.500"
  }, {
    "id": "4",
    "name": "French Fries",
    "price": "7.500"
  }],
  "Drink": [{
    "id": "1",
    "name": "Cola",
    "price": "4.600"
  }, {
    "id": "2",
    "name": "Orange Juice",
    "price": "5.400"
  }, {
    "id": "3",
    "name": "Mineral Water",
    "price": "3.500"
  }, {
    "id": "4",
    "name": "Coffee",
    "price": "5.800"
  }]
};

var str = '<select>';
for (var i = 0; i < json.Food.length; i++) {
  str += '<option value="' + json.Food[i].id + '"+ class="food">' + json.Food[i].name + '</option>    ';
}
str += '</select>';
$(".food").html(str)

var str = '<select>';
for (var i = 0; i < json.Food.length; i++) {
  str += '<option value="' + json.Drink[i].id + '"+ class="drink">' + json.Drink[i].name + '</option>';
}
str += '</select>';
$(".drink").html(str)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-fluid text-center">
    <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
    <div class="row">
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
          <option selected>Open Food Menu</option>
          <option value="1" class="food"></option>
        </select>
      </div>
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
          <option selected>Open Drink Menu</option>
          <option value="1" class="drink"></option>
        </select>
      </div>
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/66049923/display-json-data-into-select-option

Answer 1

Your current code is trying to create brand new select elements and append them to the existing option elements. Instead you just need to create a new list of option and append them to the existing select. You can use map() to do this more effectively. Note that I moved the .food and .drink class locations to the select elements.

let foodOptions = data.Food.map(o => `<option value="${o.id}">${o.name}</option>`);
$('select.food').append(foodOptions);

let drinkOptions = data.Drink.map(o => `<option value="${o.id}">${o.name}</option>`);
$('select.drink').append(drinkOptions);

This can be extended further in to a function to reduce code repetition. See this in action in the following snippet:

let data = {Food:[{id:"1",name:"Fried Rice",price:"10.000"},{id:"2",name:"Fried Noodle",price:"9.000"},{id:"3",name:"Pancake",price:"8.500"},{id:"4",name:"French Fries",price:"7.500"}],Drink:[{id:"1",name:"Cola",price:"4.600"},{id:"2",name:"Orange Juice",price:"5.400"},{id:"3",name:"Mineral Water",price:"3.500"},{id:"4",name:"Coffee",price:"5.800"}]};

let createOptions = (arr, targetSelector) => $(targetSelector).append(arr.map(o => `<option value="${o.id}">${o.name}</option>`));
createOptions(data.Food, 'select.food');
createOptions(data.Drink, 'select.drink');

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-fluid text-center">
    <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
    <div class="row">
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3 food" aria-label=".form-select-lg example">
          <option selected>Open Food Menu</option>
        </select>
      </div>
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3 drink" aria-label=".form-select-lg example">
          <option selected>Open Drink Menu</option>
        </select>
      </div>
    </div>
  </div>
</div>