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/[email protected]/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>

Are you ok with using vanilla js?

coder9927
– coder9927

2021-02-04 16:44:11 +00:00
Commented Feb 4, 2021 at 16:44 — coder9927
– coder9927, Commented Feb 4, 2021 at 16:44

Rory McCrossan · Accepted Answer · 2021-02-04 16:44:03Z

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/[email protected]/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>

As an aside, note that the data is held in a JS object, not JSON. I renamed the variable to better match the data structure being used.

Oh i see it now, thank you for the explanation sir. I'm still learning and this really helped me. Thanks again for the help!

Sebris87 · Accepted Answer · 2021-02-04 17:05:46Z

1

The line $(".drink").html(str) is adding the html you have built up inside the existing list, so you get something like this

<select>
  <option>
  <option>
    <select><option>....

You should really add elements directly to the DOM using a fragment, instead of building up HTML. It is a lot more efficient.

For example:

var food = $(".food");
var frag = document.createDocumentFragment();

for (var i = 0; i < json.Food.length; i++) {
    let option = document.createElement("option");
    option.value = json.Food[i].id;
    option.className = "food";
    option.text = json.Food[i].name;
    frag.appendChild(option);
}

food.appendChild(frag);

answered Feb 4, 2021 at 17:05

Sebris87

4525 silver badges10 bronze badges

Collectives™ on Stack Overflow

display json data into select option

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related