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()的较短版本。

>>> [f'{one.upper()}{two.upper()}' for one, two in zip(list_1, list_2)]
['IAM', 'APROGRAMMER']

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

1 个答案: