How To Get The Array Inside Array Of Json Response In Angular 10?

'CongnitiveSearchResult':{ 'value':[ { 'DisplayTags':[ 'Cross-Function', 'Retail', 'Oil & Gas',

Solution 1:

If you want to iterate them in template then take DisplayTags array instead of just their length.

To get all DisplayTags array

displayTags: string[][];

  constructor() {
    this.displayTags = CongnitiveSearchResult.value.map((o) =>
      o.DisplayTags ? o.DisplayTags : []
    );
  }

In template to iterate:

<div *ngFor="let arr of displayTags"><div *ngFor="let item of arr">
    {{ item }}
  </div><hr /></div>

Or to display according to value

<div *ngFor="let val of CongnitiveSearchResult.value"><b>Name</b> : {{ val.Name }}<br /><b>Display Tags:</b><ol><li *ngFor="let item of val.DisplayTags ? val.DisplayTags : []">
      {{ item }}
    </li></ol><hr /></div>

Demo

Solution 2:

You can do it like this:

let response_displaytags_lengths = CongnitiveSearchResult.value.map(item => item.DisplayTags? item.DisplayTags.length: 0);

Here is working example:

constCongnitiveSearchResult = {
  "value":[
     {
        "@search.score":6.755926,
        "Id":"932b3a70-630e-4fb8-3a8d-08d91c6c03ac",
        "Name":"ZBS Closed Loop",
        "ShortDescription":"All six phases of the ZBS closed loop framework which help drive sustainable outcomes for clients",
        "Description":"All six phases of the ZBS closed loop framework which help drive sustainable outcomes for clients",
        "Date":"2021-05-21T15:20:49.317Z",
        "Type":"Project Model",
        "DisplayOrder":31,
        "ArchetypeVersionUId":"e959266c-0711-443b-6b1b-08d91c6c03d4",
        "RelatedArchTypeName":"",
        "RelatedToolName":"Enterprise Value Targeting",
        "PHASENAME":"Value Targeting",
        "SUBPHASENAME":"2.2 Quantify",
        "Tags":"Cross-Function, ZBS Closed Loop, ZBX, ZBS, Zero Based, Zero Based Spend, Visibility, Value Targeting, Category Ownership, Budgeting, Zero Based Budgeting, Execute Initiatives, Control, Monitoring",
        "IsRecommended":true,
        "isFavourite":false,
        "Duration":"",
        "PhaseCount":6,
        "Score":40.0,
        "WebsiteUrl":null,
        "ActivityName":"",
        "productContacts":null,
        "productIndustries":null,
        "productIndustrieFunctions":null,
        "ArchetypeIndustries":[
           {
              "ProductVersionIndustryUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryUId":"b088760a-ba6e-4058-c8e1-08d91c6c03f1",
              "Code":null,
              "Name":"Cross Industry",
              "Description":"Cross Industry",
              "DisplayOrder":1
           },
           {
              "ProductVersionIndustryUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryUId":"c8014dc7-60bc-eb11-9173-3822e2242831",
              "Code":null,
              "Name":"ZBX",
              "Description":"ZBX",
              "DisplayOrder":100040001000100000
           },
           {
              "ProductVersionIndustryUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryUId":"c9014dc7-60bc-eb11-9173-3822e2242831",
              "Code":null,
              "Name":"ZBS",
              "Description":"ZBS",
              "DisplayOrder":100040001000200000
           }
        ],
        "ArchetypeIndustryFunctions":[
           {
              "ProductVersionIndustryFunctionUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryFunctionId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryFunctionUId":"2f7f9af1-b81f-4a05-c8e2-08d91c6c03f1",
              "Code":null,
              "Name":"Cross-Function",
              "Description":"Cross-Function",
              "RowStatusUId":null,
              "DisplayOrder":1
           }
        ],
        "ActivityModelGroups":null,
        "DisplayTags":[
           "Cross-Function",
           "Cross Industry",
           "ZBX",
           "ZBS"
        ]
     },
     {
        "@search.score":5.6102304,
        "Id":"00000030-0000-0000-0000-000000000000",
        "Name":"ZBSC Spend Assessment",
        "ShortDescription":"The objective of Visibility and Value Targeting is to map the current organization, compare it to internal and external benchmarks before arriving at agreed targets for the key categories across the Supply Chain",
        "Description":"The objective of Visibility and Value Targeting is to map the current organization, compare it to internal and external benchmarks before arriving at agreed targets for the key categories across the Supply Chain",
        "Date":"2021-05-18T14:13:05.91Z",
        "Type":"Project Model",
        "DisplayOrder":30,
        "ArchetypeVersionUId":"00000030-0010-0000-0000-000000000000",
        "RelatedArchTypeName":"",
        "RelatedToolName":"Enterprise Value Targeting",
        "PHASENAME":"Value Targeting",
        "SUBPHASENAME":"2.2 QUANTIFY",
        "Tags":"Cross-Function, ZBSC Spend Assessment, ZBx, ZBS, Retail, Oil & Gas, Manufacturing, Cost transformation, Strategic Cost Transformation , AI",
        "IsRecommended":true,
        "isFavourite":false,
        "Duration":"3-6 months",
        "PhaseCount":2,
        "Score":40.0,
        "WebsiteUrl":null,
        "ActivityName":"",
        "productContacts":null,
        "productIndustries":null,
        "productIndustrieFunctions":null,
        "ArchetypeIndustries":[
           {
              "ProductVersionIndustryUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryUId":"7ad63249-64ad-eb11-ba5f-002b671584c6",
              "Code":null,
              "Name":"Retail",
              "Description":"Retail",
              "DisplayOrder":100020001000100000
           },
           {
              "ProductVersionIndustryUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryUId":"7bd63249-64ad-eb11-ba5f-002b671584c6",
              "Code":null,
              "Name":"Oil & Gas",
              "Description":"Oil & Gas",
              "DisplayOrder":100020001000200000
           },
           {
              "ProductVersionIndustryUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryUId":"7cd63249-64ad-eb11-ba5f-002b671584c6",
              "Code":null,
              "Name":"Manufacturing",
              "Description":"Manufacturing",
              "DisplayOrder":100020001000300000
           }
        ],
        "ArchetypeIndustryFunctions":[
           {
              "ProductVersionIndustryFunctionUId":"00000000-0000-0000-0000-000000000000",
              "ProductVersionIndustryFunctionId":0,
              "ProductVersionUId":"00000000-0000-0000-0000-000000000000",
              "IndustryFunctionUId":"9d001512-65ad-eb11-ba5f-002b671584c6",
              "Code":null,
              "Name":"Cross-Function",
              "Description":"Cross-Function",
              "RowStatusUId":null,
              "DisplayOrder":100020002000100000
           }
        ],
        "ActivityModelGroups":null,
        "DisplayTags":[
           "Cross-Function",
           "Retail",
           "Oil & Gas",
           "Manufacturing"
        ]
     }
  ]
}
     
let response_displaytags_lengths = CongnitiveSearchResult.value.map(item => item.DisplayTags? item.DisplayTags.length: 0);
console.log(response_displaytags_lengths)