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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I appreciate your help, thanks.

Greetings Erik

CodePudding user response：

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 ArticleLists 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 ArticleLists ...

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

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

See @VLAZ comment for further details.

CodePudding user response：

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