Циклический просмотр вложенных данных и отображение свойств и значений объекта

Question

В моем приложении React я ищу чистый способ перебрать следующую динамическую структуру данных и отобразить свойства и значения объекта.

Пример данных:

data: {
   company: [
      {
         company_name: "XYZ Firm",
         company_email: "hello@xyz.com",
         company_phone: 91982712,
      }
   ],
   shareholders: [
     {
         shareholder_name: "Lin",
         percentage: 45
     },
     {
         shareholder_name: "Alex",
         percentage: 10
     },
   ],
   employees: [
     {
         employee_name: "May",
         employee_email: "may@xyz.com"
     },
   ]
}

Вывод, который я хочу получить:

company_name: XYZ Firm
company_email: hello@xyz.com
company_phone: 91982712

shareholder_name: Lin
shareholder_percentage: 45

shareholder_name: Alex
shareholder_percentage: 10

employee_name: May
employee_email: may@xyz.com

Это то, что я пробовал до сих пор:

//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;
})

Я могу достичь намеченных результатов, но я не уверен, еслиэто лучшее решение с точки зрения производительности. Вложение Object.keys().map кажется мне немного нехорошим.

Примечание: пользователь сможет добавлять больше акционеров / сотрудников.

Answer 1

Вот несколько более короткая версия с использованием Object.values ​​() и Object.entries () .

var data = { company: [ { company_name: "XYZ Firm", company_email: "hello@xyz.com", company_phone: 91982712, } ], shareholders: [ { shareholder_name: "Lin", percentage: 45 }, { shareholder_name: "Alex", percentage: 10 }, ], employees: [ { employee_name: "May", employee_email: "may@xyz.com" }, ] };

let profileInfo = [];

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

console.log(profileInfo);