Loop json dynamic content array in IONIC list

Question

I was populating my ionic list from the json response as given below:

{
    "engineering": [{
            "0": {
                "id": 1,
                "name": "Amrita School of Engineering"
            },
            "location": "Kollam"
        },
        {
            "0": {
                "id": 3,
                "name": "Amrita School of Medicine"
            },
            "1": {
                "id": 4,
                "name": "Amrita School of Engineering"
            },
            "location": "Kozhikode"
        }
    ],
    "medicine": [{
            "0": {
                "id": 2,
                "name": "Amrita School of Medicine"
            },
            "location": "Kollam"
        },
        []
    ]
}

My Ionic list is:

 <ion-list no-lines>
        <ion-list-header *ngFor="let details of searchResults?.engineering">
          <div style="background-color:#2f6b8c;padding-top:10px;padding-bottom:10px;padding-left:5px;color:white">{{details.location}}</div>
          <button ion-item *ngFor="let detail of details?.0" (click)="itemSelected(detail.id)">
              <span style="text-transform: capitalize;">{{detail.name}}</span>
          </button>  
        </ion-list-header>
      </ion-list>

UI i need is:

Where kerala is the location and data under kerala should be the 0,1 stuff.

Using this i am able to print the location object data while each location has different list. In The above JSON you can see Kollam in engineering has only one college name so '0', while kozhikode in engineering has 2 colleges so 0,1. if n colleges then 0 to n array will be there.. But how could i populate this in a list? Any help?

can u post a screen shot / mockup of what UI you want to get out of this? — Sergey Rudenko
– Sergey Rudenko, Commented Jan 25, 2018 at 21:05
another question - are you able to alter / change json structure? or you have to work with it and there is no means to change the source json data? — Sergey Rudenko
– Sergey Rudenko, Commented Jan 25, 2018 at 21:07
@SergeyRudenko I am able to achieve this is with another json structure. But my API data is provided from another team and they are providing this in this format!. They says this is only structure they can as they are using laravel where parsing array to json provides this format — user8231819
– user8231819, Commented Jan 26, 2018 at 11:24

Melchia · Accepted Answer · 2018-01-28 14:11:54Z

2

Honestly your json is complicated if you can change its format do it, if not never mind here's the solution.

Create a pipe (I called it value) which will convert our object into array

  import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'value'
    })

        export class ValuePipe implements PipeTransform {

    transform(value: any, args?: any[]): any[] {
            let values = (<any>Object).values(value);      
            return values;
        }

    }

And here's the html code

 <ion-list no-lines>
        <ion-list-header *ngFor="let details of searchResults?.engineering">
          <div style="background-color:#2f6b8c;padding-top:10px;padding-bottom:10px;padding-left:5px;color:white">{{details.location}} </div>
          <button ion-item *ngFor='let detail of details | value' (click)="itemSelected(detail.id)"> 
              <span style="text-transform: capitalize;">{{detail.name}}</span> 
          </button>  
        </ion-list-header>
      </ion-list>

Here's a working DEMO too

edited Jan 28, 2018 at 14:11

answered Jan 26, 2018 at 19:16

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

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

4 Comments

Sergey Rudenko Over a year ago

This is nice indeed. Also thought about pipe in this case. Thank you for sharing the code!

Melchia Over a year ago

Your answer is correct I just applied it, That's why +1

user8231819 Over a year ago

That worked! What is this pipe doing? I didnt see this pipe.ts fetching the json!

Melchia Over a year ago

Like its name says it extracts the value of your object & return it as an array

Sergey Rudenko · Accepted Answer · 2018-01-26 15:11:47Z

To be able to iterate using *ngFor directive you have to have "Iterable" such as array. In your case the data you need is in object's properties and not array.

If the source of the data can not be modified to be more friendly for your case I suggest you modify the data client-side.

Basically after you get this data you need to transform it locally to this:

{
"engineering": [
    {
        "schools": [
          {
            "id": 1,
            "name": "Amrita School of Engineering"
          },
        ],
        "location": "Kollam"
    },
    {
        "schools": [ 
          {
            "id": 3,
            "name": "Amrita School of Medicine"
          },
          {
            "id": 4,
            "name": "Amrita School of Engineering"
          }
        ],
        "location": "Kozhikode"
    }
],
"medicine": [{
        "schools": [
          {
              "id": 2,
              "name": "Amrita School of Medicine"
          },
        ],
        "location": "Kollam"
    },
]

}

where "schools" is the new array that would contain what you need. Now the question is how would you transform data.

Normally I would iterate through the original object that you receive from your server using in...for loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

In your case you would have to create this new structure by reading the original structure and doing necessary actions. This might be my naive assessment though.

You would most probably need to use this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values See example there.

Let me know if you now can solve it. Or if you struggle.

Collectives™ on Stack Overflow

Loop json dynamic content array in IONIC list

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related