Group JSON values to display in React Dropdown list

Question

I'm getting my JSON data as such:

{ 
   "cars": [
       {
          "make":"BMW",
          "model":"X3",
          "Lot":"Used"
       },
       {
          "make":"BMW",
          "model":"520",
          "Lot":"Used"
       },
       {
          "make":"Mercedes",
          "model":"550",
          "Lot":"New"
        },
        {
           "make":"Mercedes",
           "model":"C400",
            "Lot":"Used"
         }
     ]
}

I want to group them by the make to show in my dropdown list like so:

 BMW
     Used
        X3
       520
 Mercedes
      New
         550
      Used
         C400

I'm currently using this on a React page and I have the dropdown populated, I'd like to group them as such instead of showing everything on one line for each record

Please post at least an attempt at reducing the data into the shape that you need. This isn't a place to just get solutions without an attempt. — topched
– topched, Commented Nov 9, 2022 at 19:44

kind user · Accepted Answer · 2022-11-09 19:54:19Z

1

You could Array#reduce over it group by make, model and Lot keys.

const group = (arr) => arr.reduce((acc, { make, Lot, model }) => {
  if (!acc[make]) {
     acc[make] = {};
  }
  
  (acc[make][Lot] || (acc[make][Lot] = [])).push(model);

  return acc;
}, {});

const json={"cars":[{"make":"BMW","model":"X3","Lot":"Used"},{"make":"BMW","model":"520","Lot":"Used"},{"make":"Mercedes","model":"550","Lot":"New"},{"make":"Mercedes","model":"C400","Lot":"Used"}]}

console.log(group(json.cars));

answered Nov 9, 2022 at 19:54

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mustafa Poya · Accepted Answer · 2022-11-13 04:39:07Z

0

@topched Right now, I'm just binding the data from my API. like so:

const getAllCars = () => {
  allCars.GetAllCars()
    .then((response) => {
       setallCars(response.data)
   })
     .catch((e) => { console.log(e)}

}

return (
  <select> 
   <option value ='0'>
     { carTypes.map(data => (
        <option
           value={data.make}
         >
         { data.make }
        </option>
      )
 )

As I mentioned, I'm just binding the data, without the grouping.

edited Nov 13, 2022 at 4:39

Mustafa Poya

3,1236 gold badges30 silver badges48 bronze badges

answered Nov 9, 2022 at 19:52

JustWantsToCode

1031 silver badge10 bronze badges

Collectives™ on Stack Overflow

Group JSON values to display in React Dropdown list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related