How to Iterate the array of array in javascript?

Question

Json:( How to iterate this array of arrays using map function.. I have tried this.. In this.materialList => array i am getting only 1 st array of values 2nd and 3rd array values are getting undefined.. so i am not able to display in html.. )

     subrecipes:[
           subrecipematerials:   [
                                 "id":      1
                                  "material_id":      {
                                                          "id":1,
                                                          "title":"cookies"
                                                     }
                                     ],
                                     [
                                    "id":      2
                                     material_id:      {
                                                          "id":2,
                                                          "title":"cake"
                                                       }
                                       ]  
            subrecipeformulations:   [
                                      "id":      1,
                                      "formula_id":      {
                                                              "id":1,
                                                               "title":formula1
                                                          }
                                        ]
                   ]

           subrecipes:[
                   subrecipematerials:   [
                                             "id":      1
                                              material_id:      {
                                                                 "id":1,
                                                                  "title":"cookies"
                                                                 }
                                            ],
                                             [
                                             "id":      2
                                                material_id:      {
                                                                  "id":2,
                                                                  "title":"cake"
                                                                  }
                                              ]  
                        subrecipeformulations:   [
                                                    "id":      1,
                                                     "formula_id":      {
                                                                          "id":1,
                                                                          "title":formula1
                                                                        }
                                                    ]
                  ]

component.ts(I have tried this.. In this.materialList => array i am getting only 1 st array of values 2nd and 3rd array values are getting undefined.. so i am not able to display in html.. )

        let subrecipeMaterials = this.data.subRecipes.map((item, index) => {
              item = item.subrecipeMaterials[index]
                 return item
          })
            let tempMatList1 = this.group_By_Data(subrecipeMaterials, "sub_recipe_id")
            let matSubrecipies = Object.keys(tempMatList1).map(data => tempMatList1[data])

          this.filterMaterials(matSubrecipies)
         this.subrecipies = matSubrecipies.map((data, index) => {
            return {
              matList: this.materialList[index],
              formList: this.otherFormulationList[index],
              subRec: (index + 1)
            }
          })
               group_By_Data(arr, key) {
                   return arr.reduce(function (rv, x) {
                   (rv[x[key]] = rv[x[key]] || []).push(x);
                    return rv;
                 }, {});
               }

             filterMaterials(matSubrecipies) {
                  this.materialList = matSubrecipies.map(sub => {
                    return sub.filter(mat => {
                   let checkmat_id = mat.material_id
                    if (!!checkmat_id) }
                             return mat.material_id
                            }
                           })
                         })
                      }
              getMaterialListArray(i) {// this function used to display this array through html.. right now only i am getting 1st array..
                return this.materialList[i]
                 }

Answer 1

Your data is not correct. I think it should be in the form:

{subrecipes:[{
           subrecipematerials:   [{
                                 "id":      1,
                                  "material_id":      {
                                                          "id":1,
                                                          "title":"cookies"
                                                     },
                                     },
                                     {
                                    "id":      2,
                                     material_id:      {
                                                          "id":2,
                                                          "title":"cake"
                                                       }
                                       }],
            subrecipeformulations:   [{
                                      "id":      1,
                                      "formula_id":      {
                                                              "id":1,
                                                               "title":"formula1"
                                                          }
                                        }]
                   },

           {
                   subrecipematerials:   [{
                                             "id":      1,
                                              material_id:      {
                                                                 "id":1,
                                                                  "title":"cookies"
                                                                 }
                                            },
                                             {
                                             "id":      2,
                                                material_id:      {
                                                                  "id":2,
                                                                  "title":"cake"
                                                                  }
                                              } ] ,
                        subrecipeformulations:   [{
                                                    "id":      1,
                                                     "formula_id":      {
                                                                          "id":1,
                                                                          "title":"formula1"
                                                                        }
                                                    }]
                  }]
};

Also, the code item = item.subrecipeMaterials[index] should be item = item.subrecipematerials[index] (difference is M and m as it is case sensitive).