Angular 4 JSON string to array

Question

Here is my code and if the console.log(data) in browser is

app.component.ts:34 [{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]

How can I convert this json string to an array and display it? this.result1=data['SemesterId']; doesn't work. Please take a look.

interface semester {
    SemesterId: string;

  }

@Component({
selector: 'app-root',
template: `
<ul>
  <li *ngFor="let h of result1">{{h}}</li>
  </ul>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';

constructor(private http: HttpClient) {

}

result1 :string;
r1:object;
ngOnInit(): void {
  this.http.get('http://localhost:13043/students/courses/all').subscribe(
    data=>{
      this.result1=data['SemesterId'];
      console.log(data);
    }      
  )
  }

}

Correct fix:result1 :object; Then, this.result1=(JSON.parse(data.toString())). Everything works! — Kunyuan Xiao
– Kunyuan Xiao, Commented Oct 2, 2017 at 17:12

Arun Kumaresh · Accepted Answer · 2017-10-02 13:14:14Z

1

change your service to

this.http.get('http://localhost:13043/students/courses/all').subscribe(
    data=>{
      this.result1=data;

    }      
  )

In your template

<ul>
  <li *ngFor="let h of result1">{{h.SemesterId}}</li>
  </ul>

answered Oct 2, 2017 at 13:14

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

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

3 Comments

Kunyuan Xiao Over a year ago

It doesn't work.\n Cannot find a differ supporting object '[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Arun Kumaresh Over a year ago

change result1:string to result1:any[ ]

Kunyuan Xiao Over a year ago

Type 'Object' is not assignable to type 'any[]'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?

Mateusz Woźniak · Accepted Answer · 2017-10-02 17:16:53Z

0

You have to map your response as follow:

this.http.get('http://localhost:13043/students/courses/all')
         .map((result) => result.json())
         .subscribe((data) => console.log(data));

Your endpoint is returning JSON string and you have to parse that into an object to use that in the way you want to.

You can also do it a different way, by calling:

this.result = JSON.parse(data);

edited Oct 2, 2017 at 17:16

answered Oct 2, 2017 at 13:22

Mateusz Woźniak

1,4991 gold badge9 silver badges11 bronze badges

9 Comments

Kunyuan Xiao Over a year ago

It gives me an error. Property 'map' does not exist on type 'Observable<Object>'.

Mateusz Woźniak Over a year ago

How do you import Observable typings? Can you post your import statements from that file?

Kunyuan Xiao Over a year ago

import {Observable} from 'rxjs/Observable'; And my angular version is 4.4.4

Mateusz Woźniak Over a year ago

Try to change that to import { Observable } from 'rxjs';

Kunyuan Xiao Over a year ago

Yeah. I used rxjs, but it asked me to use Map. In addition, it said Value of type 'MapConstructor' is not callable. Did you mean to include 'new'?

|

Collectives™ on Stack Overflow

Angular 4 JSON string to array

2 Answers 2

3 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related