循环遍历嵌套数据并显示对象属性和值

Posted 2023-02-22

【中文标题】循环遍历嵌套数据并显示对象属性和值

【英文标题】：Looping through nested data and displaying object properties and values

【发布时间】：2020-01-31 06:29:00

【问题描述】：

在我的 React 应用程序中，我正在寻找一种干净的方式来循环以下动态数据结构并显示对象属性和值。

样本数据：

data: 
   company: [
      
         company_name: "XYZ Firm",
         company_email: "[e-mail]",
         company_phone: [phone],
      
   ],
   shareholders: [
     
         shareholder_name: "Lin",
         percentage: 45
     ,
     
         shareholder_name: "Alex",
         percentage: 10
     ,
   ],
   employees: [
     
         employee_name: "May",
         employee_email: "[e-mail]"
     ,
   ]

我想要的输出是：

company_name: XYZ Firm
company_email: [e-mail]
company_phone: [phone]

shareholder_name: Lin
shareholder_percentage: 45

shareholder_name: Alex
shareholder_percentage: 10

employee_name: May
employee_email: [e-mail]

这是我迄今为止尝试过的：

//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 对我来说似乎有点不对劲。

注意：用户将能够添加更多股东/员工。

【问题讨论】：

一个建议：尽可能写出最好的代码，尽量不要对性能过于愚蠢，然后只在遇到可衡量的问题时才优化性能。我的猜测是，对于您想要在 UI 中处理的大小数据，双精度 .keys().map() 不会有任何明显的影响。此外，您仍然只循环了一次相关数据。

感谢您的提示！我会注意的。

【参考方案1】：

这是一个使用Object.values() 和Object.entries() 的较短版本。

var data =  company: [  company_name: "XYZ Firm", company_email: "[e-mail]", company_phone: [phone],  ], shareholders: [  shareholder_name: "Lin", percentage: 45 ,  shareholder_name: "Alex", percentage: 10 , ], employees: [  employee_name: "May", employee_email: "[e-mail]" , ] ;

let profileInfo = [];

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

console.log(profileInfo);

【讨论】：

我喜欢这种方法。之前并没有真正使用过Object.values() 和flat()。感谢分享！