访问嵌套数组/对象 - 嵌套 Object 解构

Question

i'm trying for over a week now, but it seems that i don't understand all the examples i can find online.. Somehow things don't work out for me..

I get the JSON as a response from an API and i want to access the Informations inside the ArticleList Array. But when i try to console.log something it says "undefined" .. For testing purposes, i added a function that returns the JSON so i can test it without calling the API.

This is the latest version of my code:

 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);

I appreciate your help, thanks.

Greetings Erik

Answer 1

Try to destructure like this, since ArticleList is array type:

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

See @VLAZ comment for further details.

Answer 2

I don't this destrucing would work here, this returns just one array of ArticleList. In the examples below map or foreach is used to get all the data.

This creates an array with the article lists combined based of the function;

With this you can add code to skip duplicates:

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

Or just (which just outputs all articlelists combined:

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

Or as requested, split in array for each ArticleList

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

Answer 3

From the above comment...

"The OP has to destructure/assign FinalCombinationList correctly in first place (and actually call the makeArrayOfArticleList function)... const { data: { FinalCombinationList } } = makeArrayOfArticleList(); ... 2nd, there are more than just a single ArticleList within FinalCombinationList . Thus said, what does the OP want ArticleList to be like?"

If all the ArticleList s of any of a FinalCombinationList 's item are supposed to be aggregated/concatenated into a single array then flatMap is the right method to go with, whereas map does return an array of ArticleList s...

 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