Turn json string into an object array in angular cli

Question

I would like to turn a json string array into an object array. In this case I have a string receiving from backend

[{"id_pk":3,"heroname":"myherooo"},{"id_pk":12,"heroname":"Narco"}]

and I would like to turn this string into a Hero array and then return it.

My current code:

getHeroes(): Promise<Hero[]> {
     return this.http.get(this.heroesUrl)
                .toPromise()
                .then(response => {
                  console.log(response);
                  let heroes: Hero[];
                  let jo = response.text(); // [{"id_pk":3,"heroname":"myherooo"},{"id_pk":12,"heroname":"Narco"}]
                  console.log("jo: "+jo);
                  for(let i=0;i<jo.length;i++){
                      console.log("ele:  "+JSON.parse(response.text()[i])); // SyntaxError: Unexpected end of JSON input
                      heroes[i] = JSON.parse(response.text()[i]);
                  }
                  heroes;

                })
                .catch(this.handleError);
   }

Can anybody help?

Update:

This is the solution:

getHeroes(): Promise<Hero[]> {
     return this.http.get(this.heroesUrl)
                .map (t=>t.json())
                .toPromise()
                .then(response => response.map(i => new Hero(i.id_pk, i.heroname)))
                .catch(this.handleError);
   }

Michael Kang · Accepted Answer · 2017-10-17 08:30:49Z

2

Use map(t=> t.json()):

return this.http.get(this.heroesUrl)
        .map (t=>t.json())
        .toPromise()
        ...

answered Oct 17, 2017 at 8:30

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

1 Comment

ninjaxelite Over a year ago

ok this this turns it into an object array but I need Hero[] to return

.map (t=>t.json())                 .toPromise()                 .then(response => {                   response as Hero[]; // object array

})

cнŝdk · Accepted Answer · 2017-10-17 08:35:19Z

1

Your problem is that you were trying to loop and access the array before parsing the JSON in :

heroes[i] = JSON.parse(response.text()[i]);
//And then in
heroes[i] = JSON.parse(response.text()[i]);

You should parse the JSON before accessing the array an looping over its elements:

let jo = JSON.parse(response.text()); 
console.log("jo: "+jo);
for(let i=0;i<jo.length;i++){
     console.log("ele:  "+jo[i]); 
     heroes[i] = jo[i];
}

answered Oct 17, 2017 at 8:35

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Comments

Carsten · Accepted Answer · 2017-10-17 08:56:46Z

Create a constructor in your Hero class. Should look something like:

export class Hero {
  id: number;
  name: string;

  constructor(hero?: any) {
    if (hero) {
      this.id = hero.id;
      this.name = hero.name;
    }
  }
}

now you need to map your data. I'll give you an example of how i would do it:

this.heroService.getHeroes().subscribe(
  response => this.heroes = response.map(h => new Hero(h)),
  error => console.log(error)
);

Edit:

By the way, i googled your question after i posted this answer and i immediately found a solution here. You can look for .map on the page and get more examples.

this.results = res.json().results.map(item => { 
  return new SearchItem(
      item.trackName,
      item.artistName,
      item.trackViewUrl,
      item.artworkUrl30,
      item.artistId
  );
});

Chandru · Accepted Answer · 2017-10-17 09:12:11Z

0

Try this :

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
        .toPromise()
        .then(res => <Hero[]>res.json());
}

answered Oct 17, 2017 at 9:12

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

2 Comments

Chandru Over a year ago

@ninjaxelite i will post my answer check and try this

ninjaxelite Over a year ago

sadly the response is undefined cause another component is calling slice method on Hero[]

Collectives™ on Stack Overflow

Turn json string into an object array in angular cli

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related