Angular 2+ take json array as json object

Question

I have this JSON object, It shows inside arrays as Json objects. so I can't iterate over them. any help would be appreciated. Below picture shows the types showing on vs code.I have initialized placeTypes as [] but it shows as {}.

InitialModel = [
    {nearByTypeName : "ex 1",id: 1,placeTypes:[
      {placeTypeId:1,placeTypeName:"ex1.1",
      places:[]}
    ]},
    {nearByTypeName : "ex 2",id: 2,placeTypes:[
      {id:2,placeTypeName:"ex 2.1",places:[]},
      {id:3,placeTypeName:"ex2.1.1",places:[]}
    ]}
  ]

It actually IS an array. look at the }[]; below places: any[]; — Teun van der Wijst
– Teun van der Wijst, Commented Nov 20, 2018 at 10:14

Teun van der Wijst · Accepted Answer · 2018-11-20 10:33:32Z

3

Try like this:

const initialModel = [
      {
        nearByTypeName: "ex 1", id: 1, placeTypes: [
          {
            placeTypeId: 1, placeTypeName: "ex1.1",
            places: []
          }
        ]
      },
      {
        nearByTypeName: "ex 2", id: 2, placeTypes: [
          { id: 2, placeTypeName: "ex 2.1", places: [] },
          { id: 3, placeTypeName: "ex2.1.1", places: [] }
        ]
      }
    ];


    for (const i of initialModel) {
      for (const j of i.placeTypes) {
        // do stuff
      }
    }

Edit: You stated you want to use foreach loops but cannot because of the following error:

Error: Cannot invoke an expression whose type lacks a call signature

That error is caused by a mismatch in types. It's caused by the difference in property names. if u rename id in the 2nd element of array to placeTypeId it works

 const initialModel = [
  {
    nearByTypeName: "ex 1", id: 1, placeTypes: [
      { placeTypeId: 1, placeTypeName: "ex1.1", places: [] }
    ]
  },
  {
    nearByTypeName: "ex 2", id: 2, placeTypes: [
      { placeTypeId: 2, placeTypeName: "ex 2.1", places: [] },
      { placeTypeId: 3, placeTypeName: "ex2.1.1", places: [] }
    ]
  }
];


initialModel.forEach(element => {
  const temp = element.placeTypes;
  temp.forEach(val => {
    // do stuff
  })
});

edited Nov 20, 2018 at 10:33

answered Nov 20, 2018 at 10:22

Teun van der Wijst

1,1171 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Asanka Over a year ago

why can't use double foreach loops?

Teun van der Wijst Over a year ago

@Asanka glad I could help! 👍

Muhammed Albarmavi Over a year ago

I think it is better to create a interface for the data so you will catch this error easily , +1 for catch this @TeunvanderWijst 👌

Teun van der Wijst Over a year ago

@malbarmawi Yeah I agree.

Muhammed Albarmavi · Accepted Answer · 2018-11-20 10:24:51Z

2

this how you can loop throw with nested loopes

component

  InitialModel = [
    {nearByTypeName : "ex 1",id: 1,placeTypes:[
      {placeTypeId:1,placeTypeName:"ex1.1",
      places:[
        this.deepCopy()
      ]}
    ]},
    {nearByTypeName : "ex 2",id: 2,placeTypes:[
      {id:2,placeTypeName:"ex 2.1",places:[
        this.deepCopy()
      ]},
      {id:3,placeTypeName:"ex2.1.1",places:[
        this.deepCopy()
      ]}
    ]}
  ]

  deepCopy(){
    return ['TRY','USA'].slice(0)
  }

Make sure deepCopy return array

template

<div *ngFor="let m of InitialModel">
    {{m.nearByTypeName }}

    <div *ngFor="let type of m.placeTypes">
        {{type.placeTypeName}}

        <div *ngFor="let place of type.places">
            {{place}}
        </div>
    </div>
</div>

demo

edited Nov 20, 2018 at 10:24

answered Nov 20, 2018 at 10:22

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

3 Comments

Asanka Over a year ago

I want loop over in .ts file. it's work in html file.

Muhammed Albarmavi Over a year ago

can you check the demo and compare it with you code @Asanka

Asanka Over a year ago

your code works on html. but I want loop in .ts file. that is the problem.

Collectives™ on Stack Overflow

Angular 2+ take json array as json object

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related