javascript对象转换表

我有一个对象，需要对其进行转换，以便能够将其放在html表中

然而，我正在努力了解如何映射/转换它，以便可以迭代它来打印表

//Expected Output Table:
Week name | title 1 | title 2 | ...
Monday    | 12      | 34      | ...
Tuesday   | 14      | 36      | ...
...

const数据=[
{
周：“周一”，
标题：“标题1”，
价格：12，
},
{
周：“周一”，
标题：“标题2”，
价格：34，
},
{
星期二，
标题：“标题1”，
价格:14，
},
{
星期二，
标题：“标题2”，
价格:36，
},
...
]
data.map（项=>{
//这就是我被卡住的部分。
//我的脑袋绕不过去。
返回“”
})

---

我希望结果是一个循环或循环的循环，打印表格标题和值。

尝试将对象转换为数组！ 有几行是这样的：

Object.keys(data).map(key => 
<Tag/>
)

arr = [1, 2, 3, 4]

arr.map(e => e * 2) // => [2, 4, 6, 8]

Object.key（数据）.map（key=>
)

您可以通过这种方式迭代对象

---

此外，您还可以按键获取子元素（如下所示：数据[key]）

尝试将对象转换为数组！ 有几行是这样的：

Object.keys(data).map(key => 
<Tag/>
)

arr = [1, 2, 3, 4]

arr.map(e => e * 2) // => [2, 4, 6, 8]

Object.key（数据）.map（key=>
)

您可以通过这种方式迭代对象

---

另外，您可以按键获取子元素（如：数据[key]）

请原谅我的代码太破旧，如果我现在有时间的话，我会写得更好

let str = `<table><tr>${Object.keys(data[0]).map(item => `<th>${item}</th>`).join('')}</tr>`;
str += data.map(item => {
    let str = `<tr>`
    str += Object.values(item).map((value) => `<td>${value}</td>`).join('');
    str += `</tr>`
    return str
}).join('');
str += '</table>'

let str=`${Object.keys（数据[0]）.map（item=>`${item}`）。join（“”）}`；
str+=data.map（项=>{
设str=``
str+=Object.values（item.map（（value）=>`${value}`）。join（“”）；
str+=``
返回str
}).加入（“”）；
str+=''

输出结果如下

"<table><tr><th>week</th><th>title</th><th>price</th></tr><tr><td>Monday</td><td>title 1</td><td>12</td></tr><tr><td>Monday</td><td>title 2</td><td>34</td></tr></table>"

“weektitlepriceMondaytitle 112Mondaytitle 234”

请原谅我的破烂代码，如果我现在有时间，我会写得更好

let str = `<table><tr>${Object.keys(data[0]).map(item => `<th>${item}</th>`).join('')}</tr>`;
str += data.map(item => {
    let str = `<tr>`
    str += Object.values(item).map((value) => `<td>${value}</td>`).join('');
    str += `</tr>`
    return str
}).join('');
str += '</table>'

let str=`${Object.keys（数据[0]）.map（item=>`${item}`）。join（“”）}`；
str+=data.map（项=>{
设str=``
str+=Object.values（item.map（（value）=>`${value}`）。join（“”）；
str+=``
返回str
}).加入（“”）；
str+=''

输出结果如下

"<table><tr><th>week</th><th>title</th><th>price</th></tr><tr><td>Monday</td><td>title 1</td><td>12</td></tr><tr><td>Monday</td><td>title 2</td><td>34</td></tr></table>"

“weektitlepriceMondaytitle 112Mondaytitle 234”

将map看作一个专门的

foreach

循环，它返回一个数组，其值是应用于原始数组中每个元素的函数的返回值

例如，如果您有这样一个数组：

Object.keys(data).map(key => 
<Tag/>
)

arr = [1, 2, 3, 4]

arr.map(e => e * 2) // => [2, 4, 6, 8]

通过使用以下映射，可以获得所有值加倍的数组：

Object.keys(data).map(key => 
<Tag/>
)

arr = [1, 2, 3, 4]

arr.map(e => e * 2) // => [2, 4, 6, 8]

同样，如果您有一个对象数组，则可以将其映射为生成表示HTML

元素的字符串，这也很容易：

const data = [
 {
  week: 'Monday',
  title: 'title 1',
  price: 12,
 },
 {
  week: 'Monday',
  title: 'title 2',
  price: 34,
 },
 // ...
]

data.map(obj => `<tr>
    <td>Weekday: ${obj.week}</td>
    <td>Title: ${obj.title}</td>
    <td>Price: $${obj.price.toFixed(2)}</td>
</tr>`)

对于您的情况，您可以将

数据

缩减为字符串：

const data = [
 {
  week: 'Monday',
  title: 'title 1',
  price: 12,
 },
 {
  week: 'Monday',
  title: 'title 2',
  price: 34,
 },
 // ...
]

const table = data.reduce((tbody, obj) => tbody + `<tr>
    <td>Weekday: ${obj.week}</td>
    <td>Title: ${obj.title}</td>
    <td>Price: $${obj.price.toFixed(2)}</td>
</tr>`, "<table>") + "</table>";

const数据=[
{
周：“周一”，
标题：“标题1”，
价格：12，
},
{
周：“周一”，
标题：“标题2”，
价格：34，
},
// ...
]
const table=数据。reduce（（tbody，obj）=>tbody+`
工作日：${obj.week}
标题：${obj.Title}
价格：$${obj.Price.toFixed（2）}
`, "") + "";

将map看作一个专门的

foreach

循环，它返回一个数组，其值是应用于原始数组中每个元素的函数的返回值

例如，如果您有这样一个数组：

Object.keys(data).map(key => 
<Tag/>
)

arr = [1, 2, 3, 4]

arr.map(e => e * 2) // => [2, 4, 6, 8]

通过使用以下映射，可以获得所有值加倍的数组：

Object.keys(data).map(key => 
<Tag/>
)

arr = [1, 2, 3, 4]

arr.map(e => e * 2) // => [2, 4, 6, 8]

同样，如果您有一个对象数组，则可以将其映射为生成表示HTML

元素的字符串，这也很容易：

const data = [
 {
  week: 'Monday',
  title: 'title 1',
  price: 12,
 },
 {
  week: 'Monday',
  title: 'title 2',
  price: 34,
 },
 // ...
]

data.map(obj => `<tr>
    <td>Weekday: ${obj.week}</td>
    <td>Title: ${obj.title}</td>
    <td>Price: $${obj.price.toFixed(2)}</td>
</tr>`)

对于您的情况，您可以将

数据

缩减为字符串：

const data = [
 {
  week: 'Monday',
  title: 'title 1',
  price: 12,
 },
 {
  week: 'Monday',
  title: 'title 2',
  price: 34,
 },
 // ...
]

const table = data.reduce((tbody, obj) => tbody + `<tr>
    <td>Weekday: ${obj.week}</td>
    <td>Title: ${obj.title}</td>
    <td>Price: $${obj.price.toFixed(2)}</td>
</tr>`, "<table>") + "</table>";

const数据=[
{
周：“周一”，
标题：“标题1”，
价格：12，
},
{
周：“周一”，
标题：“标题2”，
价格：34，
},
// ...
]
const table=数据。reduce（（tbody，obj）=>tbody+`
工作日：${obj.week}
标题：${obj.Title}
价格：$${obj.Price.toFixed（2）}
`, "") + "";

我试图通过添加附加标题来修改需求。也可能是某个星期的某一天有一个标题，但没有其他标题。假设这些为0，我创建了这个表。代码没有经过优化，但您可以通过删除额外的

forEach

或使用

Set

const数据=[{
周：“周一”，
标题：“标题1”，
价格：12，
},
{
周：“周一”，
标题：“标题2”，
价格：34，
},
{
星期二，
标题：“标题3”，
价格：12，
},
{
周：'星期三'，
标题：“标题6”，
价格：34，
},
{
周：“星期六”，
标题：“标题9”，
价格：34，
},
{
周：“星期六”，
标题：“标题2”，
价格：24，
},
{
周：'星期日'，
标题：“标题33”，
价格：255，
}
]
/*创建一个对象，其中关键点是当天的名称，其值为
又是一个物体。
对象将如下所示
“星期一”：{
“标题1”：someValue，
“标题2”：someValue2，
},{...}*/
设tableData=data.reduce（函数（acc，curr）{
acc[当前周]？acc[当前周][当前标题]=当前价格：
会计科目[本周]={
[当前名称]：当前价格
}
返回acc；
}, {});
/*从新创建的对象中获取所有键，并创建一个数组，如
[“星期一”、“星期二”…]*/
让getKeys=Object.keys（tableData）；
让getAllKeys=[]；
for（让键进入tableData）{
for（让元素进入tableData[键]）{
如果（！getAllKeys.includes（elem））{
getAllKeys.push（元素）
}
}
}
for（让键进入tableData）{
设weekObj=Object.keys（tableData[keys]）；
getAllKeys.forEach（函数（项）{
如果（！weekObj.包括（项目））{
tableData[键][项]=0；
}
})
}
//创建表字符串
设tableStr=`Week`；
getAllKeys.forEach（函数（项）{
tableStr+=`${item}`
})
tableStr+=`；
getKeys.forEach（函数（项）{
tableStr+=`${item}`；
设getWeekobj=tableData[item]；
getAllKeys.forEach（函数（elem）{
tableStr+=`${getWeekobj[elem]}`
});
tableStr+=`；
})
表TR+=``
document.getElementById（'tab'）。innerHTML=tableStr
我试图通过添加附加标题来修改需求。也可能是某个星期的某一天有一个标题