Destructure an array of objects and create a new array with array keys as a new value in JavaScript

huangapple
go评论105阅读模式
英文:

Destructure an array of objects and create a new array with array keys as a new value in JavaScript

问题

以下是您要翻译的内容：

  1. 分解和数组对象并在JavaScript中从数组键创建新的对象数组。
  3. 现有的对象数组如下所示 -
  5. ```javascript
  6.   [
  7.     {
  8.       "Semester One" : [
  9.         {
  10.           id:"1",
  11.           name:"Name1",
  12.         },
  13.         {
  14.           id:"2",
  15.           name:"Name2",
  16.         }
  17.       ],
  18.       "Semester Two" : [
  19.         {
  20.           id:"3",
  21.           name:"Name3",
  22.         },
  23.         {
  24.           id:"4",
  25.           name:"Name4",
  26.         }
  27.       ]
  28.     }
  29.   ]

我想要实现的是这样的：

  1. [
  2.   {
  3.     id:"1",
  4.     name:"Name1",
  5.     semester:"Semester One" // 数组键
  6.   },
  7.   {
  8.     id:"2",
  9.     name:"Name2",
  10.     semester:"Semester One" // 数组键
  11.   },
  12.   {
  13.     id:"3",
  14.     name:"Name3",
  15.     semester:"Semester Two" // 数组键
  16.   },
  17.   {
  18.     id:"4",
  19.     name:"Name4",
  20.     semester:"Semester Two" // 数组键
  21.   },
  22. ]

我能够成功创建具有值的对象数组，但我无法访问像"Semester One, Semester Two"这样的数组键。

到目前为止，我所做的是 -

  1.  const arrObj = [];
  2.     paperList.forEach((element) => {
  3.       for (const key in element) {
  4.         element[key].forEach((e, i) => {
  5.           arrObj.push({
  6.             ...e,
  7.             semester: "", // 不知道如何获取这个值
  8.             isChecked: "",
  9.           });
  10.         });
  11.       }
  12.     });
  13.     console.log(arrObj);
  2. <details>
  3. <summary>英文:</summary>
  5. Distructure and array of object and create a new array of object with a new value from the array keys in Javascript.
  7. Existing Array of object is this -

[
{
"Semester One" : [
{
id:"1",
name:"Name1",
},
{
id:"2",
name:"Name2",
}
],
"Semester Two" : [
{
id:"3",
name:"Name3",
},
{
id:"4",
name:"Name4",
}
]
}
]

  2. ### what I want to achive, is this :

[
{
id:"1",
name:"Name1",
semester:"Semester One" // array key
},
{
id:"2",
name:"Name2",
semester:"Semester One" // array key
},
{
id:"3",
name:"Name3",
semester:"Semester Two" // array key
},
{
id:"4",
name:"Name4",
semester:"Semester Two" // array key
},
]

  2. I am able to successfully create an array of objects with a value, but I can&#39;t access the array keys like &quot;Semester One, Semester Two&quot;
  4. Here is what I have done so far -

const arrObj = [];
paperList.forEach((element) => {
for (const key in element) {
element[key].forEach((e, i) => {
arrObj.push({
...e,
semester: "", // don't know how to get this value
isChecked: "",
});
});
}
});
console.log(arrObj);

  3. </details>
  6. # 答案1
  7. **得分**: 0
  9. 你可以像这样实现数组，使用 foreach 并将其推送到新数组中。
  11. ```js
  12. var newArray = [];
  14. originalArray.forEach((item) => {
  15.   Object.keys(item).forEach((key) => {
  16.     item[key].forEach((obj) => {
  17.       newArray.push({
  18.         id: obj.id,
  19.         name: obj.name,
  20.         semester: key,
  21.       });
  22.     });
  23.   });
  24. });
英文:

you can achieve the array like this, use a foreach and push to new array.

  2. var newArray = [];
  4. originalArray.forEach((item) =&gt; {
  5.   Object.keys(item).forEach((key) =&gt; {
  6.     item[key].forEach((obj) =&gt; {
  7.       newArray.push({
  8.         id: obj.id,
  9.         name: obj.name,
  10.         semester: key,
  11.       });
  12.     });
  13.   });
  14. });

答案2

得分: 0

Here is the translated content without the code:

另一个可以使用的解决方案（较短）：

  1. const arr = [
  2.   {
  3.     "第一学期": [
  4.       {
  5.         id: "1",
  6.         name: "姓名1",
  7.       },
  8.       {
  9.         id: "2",
  10.         name: "姓名2",
  11.       }
  12.     ],
  13.     "第二学期": [
  14.       {
  15.         id: "3",
  16.         name: "姓名3",
  17.       },
  18.       {
  19.         id: "4",
  20.         name: "姓名4",
  21.       }
  22.     ]
  23.   }
  24. ];
  26. const result = arr.flatMap(sem => // 遍历每个元素
  27.     Object.keys(sem).flatMap(semId => // 获取学期标识符
  28.         sem[semId].map(y => // 在学期上映射
  29.             ({id: y.id, name: y.name, semester: semId}) // 格式化输出
  30.         )
  31.     )
  32. );
  33. console.log(result);

请注意，这是您提供的代码的中文翻译部分。如果您需要进一步的帮助或有其他问题，请随时提出。

英文:

Another solution you can use (shorter) :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const arr = [
  2.   {
  3.       &quot;Semester One&quot; : [
  4.         {
  5.           id:&quot;1&quot;,
  6.           name:&quot;Name1&quot;,
  7.         },
  8.         {
  9.           id:&quot;2&quot;,
  10.           name:&quot;Name2&quot;,
  11.         }
  12.       ],
  13.       &quot;Semester Two&quot; : [
  14.         {
  15.           id:&quot;3&quot;,
  16.           name:&quot;Name3&quot;,
  17.         },
  18.         {
  19.           id:&quot;4&quot;,
  20.           name:&quot;Name4&quot;,
  21.         }
  22.       ]
  23.     }
  24.   ];
  26. const result = arr.flatMap(sem =&gt;                           // iterate through each elements
  27.     Object.keys(sem).flatMap(semId =&gt;                   // get semesters identifier
  28.         sem[semId].map(y =&gt;                             // map on semesters
  29.             ({id: y.id, name: y.name, semester: semId}) // format the output
  30.         )
  31.     )
  32. );
  33. console.log(result);

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月24日 20:02:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76323311.html
  • arrays
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定