訪問嵌套數組/對象 - 嵌套 Object 解構

Question

我現在正在嘗試一個多星期，但似乎我不明白我可以在網上找到的所有示例..不知何故，事情對我來說並不奏效..

我得到 JSON 作為 API 的響應，我想訪問 ArticleList 數組中的信息。 但是當我嘗試 console.log 一些它說“未定義”的東西時。為了測試目的，我添加了一個 function，它返回 JSON，所以我可以在不調用 ZDB974238714CA8DE6434A7CE1DZ08A 的情況下對其進行測試。

這是我的代碼的最新版本：

 function makeArrayOfArticleList() { return { data: { FinalHelperCombinationList: [], FinalCombinationList: [ { ArticleList: [ { Id: 54, Description: "VT-U 20mm/4x10-20/140(30)", Number: "719241", Datasheet: "04.06-01_vt-u.pdf", }, { Id: 54, Description: "VT-U 20mm/4x10-20/140(30)", Number: "719241", Datasheet: "04.06-01_vt-u.pdf", }, ], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, { ArticleList: [ { Id: 113, Description: "VT-U 30mm/4x10-20/140(24)", Number: "719230", Datasheet: "04.06-01_vt-u.pdf", }, { Id: 114, Description: "VT-U 10mm/4x10-20/140(40)", Number: "719240", Datasheet: "04.06-01_vt-u.pdf", }, ], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, { ArticleList: [ { Id: 51, Description: "VT-B 15mm/4x10-15/140, 4Stege(40)", Number: "719041", Datasheet: "04.05-01_vt-b.pdf", }, { Id: 51, Description: "VT-B 15mm/4x10-15/140, 4Stege(40)", Number: "719041", Datasheet: "04.05-01_vt-b.pdf", }, { Id: 114, Description: "VT-U 10mm/4x10-20/140(40)", Number: "719240", Datasheet: "04.06-01_vt-u.pdf", }, ], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, ], }, }; } const { FinalCombinationList: { ArticleList } } = makeArrayOfArticleList; console.log(ArticleList);

感謝您的幫助，謝謝。

問候埃里克

Answer 1

嘗試像這樣解構，因為 ArticleList 是數組類型：

const {
  data: {
    FinalCombinationList: [ArticleList],
  },
} = makeArrayOfArticleList();

有關詳細信息，請參閱@VLAZ 評論。

Answer 2

我不認為這種破壞會在這里起作用，它只返回一個 ArticleList 數組。 在下面的示例中 map 或 foreach 用於獲取所有數據。

這將創建一個包含基於 function 的文章列表組合的數組；

有了這個，您可以添加代碼以跳過重復項：

let articleList = [];
makeArrayOfArticleList().data.FinalCombinationList.forEach(e=> articleList = articleList.concat(e.ArticleList));
console.log(articleList);

或者只是（僅輸出所有文章列表的組合：

makeArrayOfArticleList().data.FinalCombinationList.flatMap(e=> e.ArticleList);

或根據要求，為每個 ArticleList 拆分為數組

makeArrayOfArticleList().data.FinalCombinationList.map(e=> e.ArticleList);

Answer 3

從上面的評論...

“OP 必須首先正確地解構/分配FinalCombinationList （並實際調用makeArrayOfArticleList函數）... const { data: { FinalCombinationList } } = makeArrayOfArticleList(); ... 第二，不僅僅是一個ArticleList在FinalCombinationList中。因此，OP 希望ArticleList是什么樣的？

如果ArticleList的任何項目的所有FinalCombinationList都應該聚合/連接到單個數組中，那么flatMap是 go 的正確方法，而map確實返回ArticleList的數組...

 const { data: { FinalCombinationList } } = makeArrayOfArticleList(); const aggregatedArticleList = FinalCombinationList.flatMap(({ ArticleList }) => ArticleList); const listOfArticleLists = FinalCombinationList.map(({ ArticleList }) => ArticleList); console.log({ aggregatedArticleList, listOfArticleLists });

 .as-console-wrapper { min-height: 100%;important: top; 0; }

 <script> function makeArrayOfArticleList() { return { data: { FinalHelperCombinationList: [], FinalCombinationList: [{ ArticleList: [{ Id: 54, Description: "VT-U 20mm/4x10-20/140(30)", Number: "719241", Datasheet: "04.06-01_vt-u.pdf", }, { Id: 54, Description: "VT-U 20mm/4x10-20/140(30)", Number: "719241", Datasheet: "04.06-01_vt-u.pdf", }], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, { ArticleList: [{ Id: 113, Description: "VT-U 30mm/4x10-20/140(24)", Number: "719230", Datasheet: "04.06-01_vt-u.pdf", }, { Id: 114, Description: "VT-U 10mm/4x10-20/140(40)", Number: "719240", Datasheet: "04.06-01_vt-u.pdf", }], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, { ArticleList: [{ Id: 51, Description: "VT-B 15mm/4x10-15/140, 4Stege(40)", Number: "719041", Datasheet: "04.05-01_vt-b.pdf", }, { Id: 51, Description: "VT-B 15mm/4x10-15/140, 4Stege(40)", Number: "719041", Datasheet: "04.05-01_vt-b.pdf", }, { Id: 114, Description: "VT-U 10mm/4x10-20/140(40)", Number: "719240", Datasheet: "04.06-01_vt-u.pdf", }], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }], }, }; } </script>

Answer 4

enter code here

 // I have put your data into a variable; then started destructuring; //at the end of this code you will find the data from the array ArticleList in tebular form. const jsonResult = { data: { FinalHelperCombinationList: [], FinalCombinationList: [ { ArticleList: [ { Id: 54, Description: "VT-U 20mm/4x10-20/140(30)", Number: "719241", Datasheet: "04.06-01_vt-u.pdf", }, { Id: 54, Description: "VT-U 20mm/4x10-20/140(30)", Number: "719241", Datasheet: "04.06-01_vt-u.pdf", }, ], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, { ArticleList: [ { Id: 113, Description: "VT-U 30mm/4x10-20/140(24)", Number: "719230", Datasheet: "04.06-01_vt-u.pdf", }, { Id: 114, Description: "VT-U 10mm/4x10-20/140(40)", Number: "719240", Datasheet: "04.06-01_vt-u.pdf", }, ], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, { ArticleList: [ { Id: 51, Description: "VT-B 15mm/4x10-15/140, 4Stege(40)", Number: "719041", Datasheet: "04.05-01_vt-b.pdf", }, { Id: 51, Description: "VT-B 15mm/4x10-15/140, 4Stege(40)", Number: "719041", Datasheet: "04.05-01_vt-b.pdf", }, { Id: 114, Description: "VT-U 10mm/4x10-20/140(40)", Number: "719240", Datasheet: "04.06-01_vt-u.pdf", }, ], TotalSize: 40, HighSize: 40, Category1: false, Category2: false, Category3: false, Category4: false, Category6: false, Category7: false, CombinationScore: 0, }, ], }, }; // Starting of Destructuring const { data: { FinalCombinationList: articles }, } = jsonResult; //variable "articles" is an array containing objects as its elements. // so applying froEach loop to the array "articles" articles.forEach((article) => { // after looping through "articles" we get nested objects "article" // Destructuring "article" to get ArticleList. ArticleList will be arrays. const { ArticleList } = article; //applying froEach loop to the array "ArticleList" ArticleList.forEach((articleInfo) => { // to show data in tebular format console.table(articleInfo); //"articleInfo" are objects. //Destructuring object properties const { Id, Description, Number, Datasheet } = articleInfo; console.log(Id, Description, Number, Datasheet); }); }); // run this code with an html file and see the result in console as console.table() will only work in a browser // or if you're using vs code, you can run this code directly