Convert string to array in angular2 in html template

Question

I'm getting Json reponse like this,

var optCities = [{
"resultData": {
"Hoteloption": [
    {   
        "CityRating":"[
        {'City': 'Bangkok','Rating':4.5},
        {'City': 'Phuket','Rating':4.5},
        {'City': 'Nonthaburi','Rating':4.5},
        {'City': 'Broc','Rating':4.5}]"
    }]
}}];

I've tried to create a pipe

transform(value: any, args?: any): any {
    var st = JSON.stringify(value);
    var result =  JSON.parse(st);
    return result;
  }

first tried to create json object. but if I console the result variable it still shows string.

<div *ngFor="let city of optCities[0].resultData.Hoteloption[0].CityRating | strReplace ;let i = index; ">
    {{city.Rating}}
</div>

What I'm missing?

@RahulSingh I've created jsfiddle its same what i'm trying jsfiddle.net/fmqzxwc3 — Nikhil Radadiya
– Nikhil Radadiya, Commented Aug 2, 2017 at 13:00

Nikhil Radadiya · Accepted Answer · 2017-08-03 09:00:51Z

2

Your nested object keys should be wrapped in double qoutes instead of single, it is better to fix this from backend, here is some simple solution for do it with JS

Angular pipe

transform(value: any, args?: any): any {
    // i'm guessing that your data (value) is string
    return typeof value==='string' ? JSON.parse(value.replace(/'/g, '"')) : value;
}

edited Aug 3, 2017 at 9:00

Nikhil Radadiya

2,0653 gold badges25 silver badges45 bronze badges

answered Aug 2, 2017 at 13:01

Yordan Nikolov

2,67815 silver badges17 bronze badges

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

1 Comment

Nikhil Radadiya Over a year ago

How can I do this in angular2?

Piyush Patel · Accepted Answer · 2017-08-02 13:00:20Z

1

you are getting incorrect JSON of CityRating Array from server

here is an workaround Define the function in your component

getJson(x){
  let z = x.replace(/'/g, '"');
  return JSON.parse(z);
}

to use in you template

<div *ngFor="let city of 
getJson(optCities[0].resultData.Hoteloption[0].CityRating);let i = 
 index; ">
  {{city.Rating}}
</div>

the function will return you an vaild JSON Array so your loop will work

answered Aug 2, 2017 at 13:00

Piyush Patel

1,24015 silver badges19 bronze badges

Comments

Saksham Gupta · Accepted Answer · 2017-08-02 12:51:13Z

0

That's because your JSON object is wrong. Remove the double quotes from the array in CityRating.

var optCities = [{
"resultData": {
"Hoteloption": [
{   
    "CityRating":[
    {'City': 'Bangkok','Rating':4.5},
    {'City': 'Phuket','Rating':4.5},
    {'City': 'Nonthaburi','Rating':4.5},
    {'City': 'Broc','Rating':4.5}]
}]
}}];

answered Aug 2, 2017 at 12:51

Saksham Gupta

6286 silver badges14 bronze badges

2 Comments

Nikhil Radadiya Over a year ago

that's the problem I can't change that getting it from response of API

Nikhil Radadiya Over a year ago

any other solution?

Андрій Кукуруза · Accepted Answer · 2017-08-02 12:51:54Z

0

Not sure, but maube

transform(value: any, args?: any): any {
    return JSON.parse(value);
}

This is if you array really must be in string

answered Aug 2, 2017 at 12:51

Андрій Кукуруза

312 bronze badges

1 Comment

Nikhil Radadiya Over a year ago

Thats not working, getting Unexpected token ' in JSON at position 2

Collectives™ on Stack Overflow

Convert string to array in angular2 in html template

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related