CODEWITHSUNDEEP
angularionic3ionic4
javapatriot
javapatriot

Reputation: 353

Looping through comma separated images from Firebase using Ionic / Angular

I'm having trouble looping through image URLs separated by a comma from FireBase in my Ionic App. I have tried to use Split but I'm getting the following error:

TypeError: _v.context.$implicit.images.split is not a function

Here is an example of what the JSON response looks like:

        {
            "U2Bpjq0ZAeh90EHA2ddMiFoSSwi2": {
                "fullName": "Robert",
                "images": [
                    "https://media-cdn.trulia-local.com/neighborhood-media-service-prod/ga/atlanta/morningside-lenox-park/2005-ga_atl_morningside_lenox_park_82753_186_256x256_cfill.jpg",
                    "http://www.katherinepelzarchitecture.com/House_Raising_files/IMG_6922.jpg",
                    "https://pbs.twimg.com/profile_images/3320058200/1bcd222ed0b888c519ac534c881a0860.jpeg"
                ],
                "jDate": "2019-07-19"
            },
            "pmH1y6oBWXcwNRi2Hlod0wPpJK72": {
                "fullName": "Chris",
                "images": [
                    "https://media-cdn.trulia-local.com/neighborhood-media-service-prod/ga/atlanta/morningside-lenox-park/2005-ga_atl_morningside_lenox_park_82753_186_256x256_cfill.jpg",
                    "http://www.katherinepelzarchitecture.com/House_Raising_files/IMG_6922.jpg",
                    "https://pbs.twimg.com/profile_images/3320058200/1bcd222ed0b888c519ac534c881a0860.jpeg"
                ],
                "jDate": "2019-07-19"
            }    
        }

Here is what I am using to try and Split the images

<div *ngFor="let img of (job.images.split(','))"><img src="{{ img }}" /></div>

The end result should be to display each image in its own image element

Any help would be appreciated.

Upvotes: 1

Views: 113

Answers (1)

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

It looks like images is already an array. You can simply iterate through that instead of splitting.

Change your template to following

<div *ngFor="let img of job.images"><img src="{{ img }}" /></div>

Upvotes: 2

Related Questions