How to create dropdown from array of object?

Question

Suppose I have this JSON

let array = [
    {
        "Ids": "Sec 1",
        "details": [
          {
            "id": "5ae82",
            "Name": "John",
            "currency": "$",
            "amount": "100"
          },
          {
            "id": "5ae821",
            "Name": "Henary",
            "currency": "$",
            "amount": "100"
          }
        ]
    },
    {
        "Ids": "Sec 2",
        "details": [
          {
            "id": "5ae83",
            "Name": "Raes",
            "currency": "$",
            "amount": "100"
          },
          {
            "id": "5ae821",
            "Name": "Jass",
            "currency": "$",
            "amount": "100"
          }
        ]
    },
    {
        "Ids": "Sec 3",
        "details": [
          {
            "id": "5ae831",
            "Name": "Charles",
            "currency": "$",
            "amount": "100"
          },
          {
            "id": "5ae841",
            "Name": "Twitter",
            "currency": "$",
            "amount": "100"
          }
        ]
    },  
]

How can I create a dropdown such that all the Ids should be in the dropdown list based on the dropdown selection show its details? using javascript.

The problem I am facing is how can I create a dropdown from the array of objects.

let dd = document.getElementById("selectdd");
dd.innerHTML = array.map((item) =>
  <option key={item.Ids} id=`${item.Ids}`>${item.Ids}</option>
);

How can I display the details based on ids selected?

Does this answer your question? [JavaScript - populate drop down list with array](https://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array) — dustinroepsch, Jan 04 '21 at 07:59

score 1 · Answer 1 · answered Jan 04 '21 at 08:48

You are entering an array to the innerHTML which is meant to get string, add a join('') at the assignment. You should return a string for each option, so note where the ticks are.

You also want to use value property and not key or id.

let dd = document.getElementById("selectdd");
dd.innerHTML = array.map((item) =>
    `<option value="${item.Ids}">${item.Ids}</option>`
).join('');

If you want any item to be selected by default, use the selected property on the .

Mosh Feu · Answer 2 · 2021-01-04T10:07:48.920

What's not?

Unless you're using jsx, you can't inject elements in js code. Even if you'd, it wouldn't be possible to assign it to innerHTML.

What's yes?

Since innerHTML is string, you can map objects ("<option>..</option>") into strings and then join() them into a single string, like this:

array.map((item) =>
  `<option key={item.Ids} id="${item.Ids}">${item.Ids}</option>`
).join('')

let array = [{
    "Ids": "Sec 1",
    "details": [{
        "id": "5ae82",
        "Name": "John",
        "currency": "$",
        "amount": "100"
      },
      {
        "id": "5ae821",
        "Name": "Henary",
        "currency": "$",
        "amount": "100"
      }
    ]
  },
  {
    "Ids": "Sec 2",
    "details": [{
        "id": "5ae83",
        "Name": "Raes",
        "currency": "$",
        "amount": "100"
      },
      {
        "id": "5ae821",
        "Name": "Jass",
        "currency": "$",
        "amount": "100"
      }
    ]
  },
  {
    "Ids": "Sec 3",
    "details": [{
        "id": "5ae831",
        "Name": "Charles",
        "currency": "$",
        "amount": "100"
      },
      {
        "id": "5ae841",
        "Name": "Twitter",
        "currency": "$",
        "amount": "100"
      }
    ]
  },
]

let dd = document.getElementById("selectdd");
dd.innerHTML = array.map((item) =>
  `<option key={item.Ids} id="${item.Ids}">${item.Ids}</option>`
).join('');

dd.addEventListener('change', e => {
  const {value} = e.target;
  const selectedItem = array.find(item => item.Ids === value);
  console.log(selectedItem);
});

<select id="selectdd"></select>

Thanks @Mosh Feu, actually the main problem is based on the selection in dropdown how can I show and hide its ```details``` array of object — user14765755, Jan 04 '21 at 08:49
I've updated the answer. Basically, you have the item's id in the `change` event, you just need to `find` the items based on it. — Mosh Feu, Jan 04 '21 at 10:08

score 0 · Answer 3 · answered Jan 04 '21 at 08:51

0

You can try this logic and extend it based on your requirement.

let selectElement = document.getElementById("selectdd");

array.forEach(item=>{
  const option = document.createElement("option");
  option.setAttribute("id",item.Ids);
  option.textContent = item.Ids;
  selectElement.appendChild(option);
  console.log(option);
});

Codepen.io Link: https://codepen.io/emmeiWhite/pen/OJRvdGe

answered Jan 04 '21 at 08:51

Imran Rafiq Rather

7,677
1
16
35

The above answer will show you the item.Ids in your code :) Then every element in the array has another another. You can extend the logic as per your requirement... :) – Imran Rafiq Rather Jan 04 '21 at 08:53

How to create dropdown from array of object?

3 Answers3