Accepting a JSON array as a JSON object is a feature of Angular 2+

Question

Accepting a JSON array as a JSON object is a feature of Angular 2+

Hey there. I'm currently dealing with a JSON object that showcases arrays as JSON objects inside. This is making it difficult for me to iterate over them. Any suggestions or tips on how to handle this would be greatly appreciated! The image below illustrates the types shown in VS Code. Even though I have initialized placeTypes as an empty array, it appears as an empty object.

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:[]}
    ]}
  ]

https://i.sstatic.net/806Xy.jpg

https://i.sstatic.net/8LL7F.png

angular typescript

Answer 1

Answer №1

Here is a suggested approach:

const startingData = [
      {
        category: "example 1", id: 1, types: [
          {
            typeId: 1, typeName: "type 1.1",
            items: []
          }
        ]
      },
      {
        category: "example 2", id: 2, types: [
          { typeId: 2, typeName: "type 2.1", items: [] },
          { typeId: 3, typeName: "type 2.1.1", items: [] }
        ]
      }
    ];


    for (const data of startingData) {
      for (const type of data.types) {
        // carry out operations
      }
    }

Note: If you encounter an issue with using foreach loops due to an error message like "Error: Cannot invoke an expression whose type lacks a call signature," it may be because of differences in property names. To resolve this, make sure that the property names match in all elements of your array. For example, renaming id in the 2nd element to typeId should solve this problem.

 const startingData = [
  {
    category: "example 1", id: 1, types: [
      { typeId: 1, typeName: "type 1.1", items: [] }
    ]
  },
  {
    category: "example 2", id: 2, types: [
      { typeId: 2, typeName: "type 2.1", items: [] },
      { typeId: 3, typeName: "type 2.1.1", items: [] }
    ]
  }
];


startingData.forEach(element => {
  const temp = element.types;
  temp.forEach(val => {
    // perform operations
  })
});

Answer 2

Here is a suggested approach:

const startingData = [
      {
        category: "example 1", id: 1, types: [
          {
            typeId: 1, typeName: "type 1.1",
            items: []
          }
        ]
      },
      {
        category: "example 2", id: 2, types: [
          { typeId: 2, typeName: "type 2.1", items: [] },
          { typeId: 3, typeName: "type 2.1.1", items: [] }
        ]
      }
    ];


    for (const data of startingData) {
      for (const type of data.types) {
        // carry out operations
      }
    }

Note: If you encounter an issue with using foreach loops due to an error message like "Error: Cannot invoke an expression whose type lacks a call signature," it may be because of differences in property names. To resolve this, make sure that the property names match in all elements of your array. For example, renaming id in the 2nd element to typeId should solve this problem.

 const startingData = [
  {
    category: "example 1", id: 1, types: [
      { typeId: 1, typeName: "type 1.1", items: [] }
    ]
  },
  {
    category: "example 2", id: 2, types: [
      { typeId: 2, typeName: "type 2.1", items: [] },
      { typeId: 3, typeName: "type 2.1.1", items: [] }
    ]
  }
];


startingData.forEach(element => {
  const temp = element.types;
  temp.forEach(val => {
    // perform operations
  })
});

Answer 3

Answer №2

Here's an example of looping through nested loops:

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

Ensure that the deepCopy function returns an 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>

View demo

Answer 4

Here's an example of looping through nested loops:

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

Ensure that the deepCopy function returns an 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>

View demo

Accepting a JSON array as a JSON object is a feature of Angular 2+

Answer №1

Answer №2

Similar questions

Adding a fresh element to an array in Angular 4 using an observable

Ways to retrieve time series data using angular

What is the correct way to specify the data type for the useState hook when I intend to store an array of objects?

The NX monorepo from @nrwl is unable to locate the .svgr configuration file within the lib directory

Issue with blueprintjs/core type in JupyterLab Extension after running npm install

Do you have any suggestions for optimizing an Angular 15 reactive form that gets filled with data from an API?

How can I create an input field in MUI that restricts input to letters, numbers, and dashes

Improving efficiency of basic image carousel in Angular 8

Commit to calculating the total sum of each element using AngularJS

Attempting to launch an Angular web application on Azure's Linux-based Web App service

Angular input for date is showing wrong value due to timezone problem

The output decorator in Angular seems to be malfunctioning and displaying an error message

Tips for developing a strongly-typed generic function that works seamlessly with redux slices and their corresponding actions

Generic type input being accepted

Removing the @Input decorator in Angular's codebase

Unable to fetch information from the controllerAPI function within the tsx file due to a Module Parse error

What steps are needed to enable WebStorm's autocompletion for external libraries?

Encountered an issue with Angular Material sidenav: The synthetic listener @transform.start was found

Display a customized modal showcasing the data of a particular user

Retrieving information from an http request within a for loop in an Angular 2+ application