How to convert XML link to Json Link and how to use it on ionic 3?

Ionic Framework ionic-v3
1

As you can see in the title, i would like to convert an XML link to Json link. I’m new on ionic so i’m trying to lean new things.

i tried to do like this tutorial: https://www.ionicrun.com/transform-xml-to-json-in-ionic-2-with-angular-4-3/

but i got this issue:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> DataProvider]:
StaticInjectorError(Platform: core)[HomePage -> DataProvider]: NullInjectorError: No provider for DataProvider! Error: StaticInjectorError(AppModule)[HomePage -> DataProvider]:
StaticInjectorError(Platform: core)[HomePage -> DataProvider]: NullInjectorError: No provider for DataProvider!

I have no idea how to solve it.

home.ts

…

constructor(public navCtrl: NavController, public http: HttpClient, public dataProvide: DataProvider, public transformProvider: TransformProvider) {
this.x2j();
}

x2j(){
this
.dataProvide
.getRandomUser()
.pipe(
map((res: string) => this.transformProvider.convertToJson(res))
)
.subscribe((res: Object) => {
console.dir(res);
});
}
if you have another way to convert xml->Json tell me

Thanks all

2

Add DataProvider in the provider column of your app.module.ts

3

Thanks Sir ! It works !

Now i would like to select some data from the Json, how i should do ?

Right now i trying something like this

ion-card-title>
{{review?.Title}}
<br>
<h5 [innerHTML]="review?.Content"></h5>
</ion-card-title>

But if i want to display only 5 reviews (title + content) or display Images and when we click on it; it show a pop-up with (title + content).

How we do that ?

Thanks

4

Let’s say you are storing your JSON in the name of reviews.

In your view, you need to use *ngFor to iterate the JSON.

<ion-card *ngFor="let review of reviews; let i=index;" [hidden]="i>4">
<ion-card-title>
{{review.Title}}
</ion-card-title>
<ion-card-content>
<h5>{{review.Content}}
</ion-card-content>

</ion-card>

Based on the index, only top 5 values of the JSON will display in your view

5

oh i understand and it works !
So if i want to show the content on a new page when i click the title, how should i do ?

6

You have to pass parameter to the next page and you have to show. Let’s take 2 pages for example, ListPage and DetailsPage let’s say.

First, in list.html

<ion-card *ngFor="let review of reviews; let i=index;" [hidden]="i>4" (click)="detailsFunc(review)">
<!--here we are passing that single object to the function as parameter-->
<ion-card-title>
{{review.Title}}
</ion-card-title>
<ion-card-content>
<h5>{{review.Content}}
</ion-card-content>

</ion-card>

and in list.ts

detailsFunc(a){
this.navCtrl.push(DetailsPage, {review: a});

}

Then in details.ts,

export class DetailsPage{
reviews:any=[];
constructor(public navParams: NavParams, public navCtrl: NavController){
this.review = navParams.get('review');
}
}

And finally in details.html,

<ion-card >

<ion-card-title>
{{review.Title}}
</ion-card-title>
<ion-card-content>
<h5>{{review.Content}}
</ion-card-content>

</ion-card>

Don’t forget to mark as solution if you find this is useful

7

I have a little issues, i see in console that is working, but i see nothing in app

8

What are you seeing in the console? Send that

9

Now it working ! Thanks !

10

Now i m trying to link several Json link on one page and diplay for each Json the specific content.

For example:

home.ts

  getAmericaData(){
    let data: Observable<any> = this.http.get(the link url json from America Music review);
    data.subscribe(data =>{
      this.reviews = data["Collections"].Review;
    });
  }

  getFranceData(){
    let data: Observable<any> = this.http.get(the link url json from France Music review);
    data.subscribe(data =>{
      this.reviews = data["Collections"].Review;
    });
  }

home.html ( this is for the tab America )

                <ion-list *ngSwitchCase="'reviews'">
                    <ion-card *ngFor="let review of reviews; let i=index;" [hidden]="i>11" (click)="showDetails(review)">
                        <ion-list>
                            <h3 *ngIf="!reviews.length">No Search Found</h3>
                            <ion-item>
                                <div class="my-content line-break">
                                    <h2>{{review?.Title}}</h2>
                                    <p>{{review?.ShortStory}}</p>
                                    <button ion-button color="Yellow" item-end full>More</button>
                                </div>
                            </ion-item>
                        </ion-list>
                    </ion-card>
                </ion-list>

As you can see, i did for the America Json link and it works perfectly but now how should i do for the tab France ?

Thanks !

11

Anchor link is not working from JSON string in ionic 3 and angular 4 : ur <a (click)=‘openActionPage()’>terms and conditions

Am using this string in JSON file.

In order to proceed, you need to agree with our “terms and conditions” and adding for accessing in frontend using

<message *ngFor="let message of messages" [innerHTML]="message.content">    {{message.content}}</message>

but the link openActionPage() is not opening in front end.
( “my.item1”: " Hi, In order to proceed, you need to agree with our <a (click)='openActionPage()>terms & conditions)

using this (my.item1) key am accessing it in frontend from Mongo translations, please help me to proceed it

12

If you don’t get any better answers, I recommend pretending innerHTML doesn’t exist.

13

Still i dint get any answer, How would i achieve it.