How can I display JSON values without revealing the parent in Angular 5 and Ionic 3?

I am trying to extract values from JSON without the parent keys.

Here is the JSON structure I have:

[
    {
      "companies": [{
        "id": 1,
        "name": "Prueba",
        "company_number": "23423423A",
        "latitude": 241241.12,
        "longitude": 213213.12,
        "country": "ES"
      },
        {
          "id": 2,
          "name": "Prueba2",
          "company_number": "23423423A",
          "latitude": 241241.12,
          "longitude": 213213.12,
          "country": "US"
        },
        {
          "id": 3,
          "name": "Prueba3",
          "company_number": "23423423AB",
          "latitude": 241241.19,
          "longitude": 213213.20,
          "country": "US"
        }
      ]
    },
    {
      "centers":[
        {
          "id": 1,
          "name": "Prueba4",
          "center_number": "23423423A",
          "latitude": 241241.12,
          "longitude": 213213.12,
          "country": "ES"
        },
        {
          "id": 2,
          "name": "Prueba5",
          "center_number": "23423423A",
          "latitude": 241241.12,
          "longitude": 213213.12,
          "country": "US"
        }
      ]
    }
  ]

In my Ionic project using Angular, I've written the following code:

 <ion-list>
<ion-item *ngFor="let p of profiles; let i=index">
<p>{{i}}</p> <!-- this works fine-->
  <ion-list>
    <ion-item *ngFor="let s of p[i]; let i2=index">
      <p>{{p[i][i2][name]</p>
    </ion-item>
  </ion-list>
</ion-item>

The desired output is:

  • Prueba
  • Prueba2
  • Prueba3
  • Prueba4
  • Prueba5

Is it possible to achieve this directly in front-end or should I process it beforehand?

Thank you in advance

Answer №1

ngFor cannot iterate through the current structure. It is required to flatten it beforehand.

If we assume that the array is named arr:

const newArr = [...arr[0].companies, ...arr[1].centers];

After flattening, newArr will contain the specified five objects which can then be used with ngFor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular2's service executing http method is limited to just once

I have a service that is responsible for retrieving information from the server. The goal is to execute the request only once and then share the data with every component in the application. Currently, my code looks like this: @Injectable() export class P ...

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

While working on my project and using react-color as a dependency, I encountered an issue with the tsc import failing. The error message displayed: node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts(2,41): error TS2307: Cannot find module & ...

Ensure the cursor is continually grabbing while moving items within a list using the @angular/cdk/drag-drop functionality

I have an example on stackblitz where I am using @angular/cdk/drag-drop in my project. I am attempting to change the cursor to cursor:grabb and cursor:grabbing when the cursor is over an element and when I drag a picked element. Here is the CSS line I am ...

Error message: Unable to associate with DIRECTIVE as it is not a recognized attribute of 'div'

Despite searching through similar questions about this error, I have not been able to find a solution. The issue arises with my highlight directive, which takes an input parameter index. Initially, the directive worked perfectly when declared within the m ...

Developing a collection of components with customizable color variations using React

I am interested in creating a React component library where users can specify color variants. For instance, I want to use the following syntax: const customTheme = createCustomTheme({ button: { variants: { primary: 'primary ...

What is the best method to include spacing between strings in an array and then combine them into a csv-friendly format?

The method I am currently employing involves the following: var authorsNameList = authors.map(x => x.FirstName + ' ' + x.LastName); Yet, this generates an outcome similar to this: Bob Smith,Bill Jones,Nancy Smith Nevertheless, the desired ...

What is the best way to transfer information from a service to my controller?

Currently, I am experimenting with the Ionic framework and learning AngularJS simultaneously. I have been working on implementing $q and asynchronous calls but facing some challenges. My goal is to parse a JSON file using GetJsonSpecials, pass it to GetDat ...

Angular component failing to refresh data upon service response

Within my Angular component, I have integrated badges onto certain icons. These badge numbers are fetched from an api upon entering the page, utilizing ionViewWillEnter(). Once the api response is received, the outcome is stored in a local variable, which ...

Converting JS carousel to TS for showcasing multiple items

I am currently working on integrating a bootstrap carousel into my Angular project and I need to convert my JavaScript file to a TypeScript file. As someone who is new to this, I'm unsure of the process for converting and implementing it in a .ts file ...

Angular: merging object values into a single string by looping over them

i am dealing with the following data : "commercialRanges": [ { "rangeId": "700", "rangeName": "POSTPAID" }, { "rangeId": "500", "rangeName": "PREPAID" }, ] In my view, I am aiming to display the ...

Vue version 3 is encountering an issue with a module that does not have an exported member in the specified path of "../../node_modules/vue/dist/vue"

After I updated my npm packages, errors started popping up in some of the imports from the 'vue' module: TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X' The X instances affected inclu ...

ionic - how to make tabs float at the bottom of the screen

Having a problem with positioning Ionic tabs at the bottom of the screen. I want them to always be visible, like position: fixed; bottom: 0; left: 0;. However, they're not behaving as expected in my current setup. Here's the template I'm ...

Steps for activating the read-only input field

Currently, I have an input box in ng Ant design with the readonly attribute. I want to make it editable once the user clicks on edit. Can someone guide me on how to achieve this? Snippet of Code: <i nz-icon type="edit" class="toolbar-icon" (click)="ed ...

Service consuming in Angular 2 using Stomp protocol

Why am I seeing responseBody as undefined, but I am able to see the subscribe response in msg_body? What could be causing this issue with responseBody? let stomp_subscription = this._stompService.subscribe('/topic/queue'); stomp_subscription.ma ...

Creating specialized validation for numeric fields in Angular2

Attempting to implement custom validation in Angular 2 has been a challenge for me. I have followed the necessary steps based on my understanding, but still struggling to get it working. import { FORM_DIRECTIVES, AbstractControl, ControlGroup ,FormBuilder ...

Utilizing React Higher Order Components with TypeScript: can be initialized with a varied subtype of restriction

I am currently working on creating a Higher Order Component (HOC) that wraps a component with a required property called value, while excluding its own property called name. import React, { ComponentType } from 'react'; interface IPassThro ...

The integration of AngularFireFunctions with Ionic 5 Angular breaks down when attempting to create a production build using the --prod flag

Attempting to invoke a Firebase function using Angular Fire within an Ionic project. const callable = this.afFunctions.httpsCallable('getWeather'); const result = await callable(request).toPromise(); The functionality operates as expected in ...

Enhance your Vuex action types in Typescript by adding new actions or extending existing

I'm new to Typescript and I'm exploring ways to add specific type structure to all Actions declared in Vue store without repeating them in every Vuex module file. For instance, instead of manually defining types for each action in every store fi ...

Modify the "field" key type within the GridColDef interface of MUI DataGrid

Is there a way to assign an array of specific strings to the default type of GridColDef's field key, which is typically set to string? I attempted solutions like Array<Omit<GridColDef, 'field'> & {field: 'name' | &apo ...

Difficulty recognizing left click on onmouseup and onmousedown events in React with TypeScript

I am experiencing an issue with my code that is meant to update the mousePressed variable accordingly when the mouse button is pressed and released. Surprisingly, it works as expected for right-click and middle-click events but not for left-click. The ev ...