Looping through nested data and displaying object properties and values

Question

In my React app, I'm looking for a clean way to loop through the following dynamic data structure and display the object properties and values.

Sample data:

data: {
   company: [
      {
         company_name: "XYZ Firm",
         company_email: "[email protected]",
         company_phone: 91982712,
      }
   ],
   shareholders: [
     {
         shareholder_name: "Lin",
         percentage: 45
     },
     {
         shareholder_name: "Alex",
         percentage: 10
     },
   ],
   employees: [
     {
         employee_name: "May",
         employee_email: "[email protected]"
     },
   ]
}

The output I want is:

company_name: XYZ Firm
company_email: [email protected]
company_phone: 91982712

shareholder_name: Lin
shareholder_percentage: 45

shareholder_name: Alex
shareholder_percentage: 10

employee_name: May
employee_email: [email protected]

This is what I've tried so far:

//data contains the entire object
const profileInfo = Object.keys(data).map(key => {
   let profileSection = [];
   for (let values of data[key]) { //retrieve the objects of each "section" e.g., company, shareholders
      Object.keys(values).map(key => {
         profileSection.push(<p>{key}: {values[key]}</p>);
      })
   }
   return profileSection;
})

I'm able to achieve the intended results but I'm not sure if it's the best solution in terms of performance. Having nested Object.keys().mapseems a bit off to me.

Note: User will be able to add more shareholders/employees.

A suggestion: write the best code you can, trying not to be TOO stupid about performance, and then only optimize for performance if you've got a measurable problem. My guess is that for the size data you're ever going to want to deal with in a UI, the double .keys().map() will not have any noticeable effect. And besides, you're still only looping over the relevant data once. — Scott Sauyet
– Scott Sauyet, Commented Oct 2, 2019 at 2:05

Nikhil · Accepted Answer · 2019-10-02 01:17:53Z

2

Here is a somewhat shorter version using Object.values() and Object.entries().

var data = { company: [ { company_name: "XYZ Firm", company_email: "[email protected]", company_phone: 91982712, } ], shareholders: [ { shareholder_name: "Lin", percentage: 45 }, { shareholder_name: "Alex", percentage: 10 }, ], employees: [ { employee_name: "May", employee_email: "[email protected]" }, ] };

let profileInfo = [];

Object.values(data).flat().forEach((item) => {
  Object.entries(item).forEach(([key, value]) => {
    profileInfo.push(key + ": " + value);
  });
});

console.log(profileInfo);

answered Oct 2, 2019 at 1:17

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

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

1 Comment

Edmund Over a year ago

I like the approach. Didn't really use Object.values() and flat() before. Thanks for sharing!

Collectives™ on Stack Overflow

Looping through nested data and displaying object properties and values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related