Convert a JSON to OBJECT with Angular

Asked

Viewed 1,534 times

0

I have a problem, I need to transform a JSON object that I receive from my backend to an object.

I’m getting this JSON 

{"content": [{"id": 1, "nomebd": "teste", "email": "[email protected]"}, {"id": 2, "nomebd": "oi", "email": "oi"}, {"id": 3, "nomebd": "joao", "email": "tg"}, {"id": 4, "nomebd": "joao1", "email": "tg1"}, {"id": 5, "nomebd": "kkkkk", "email": "kkk"}, {"id": 6, "nomebd": "dae", "email": "dae"}, {"id": 7, "nomebd": "coe", "email": "coe"}, {"id": 8, "nomebd": "dadadad", "email": "dadadadada"}]}

by using the following code

this.service.getConfig()
.subscribe(dados => this.cursos = dados)

getConfig() comes from my service which is 

  getConfig() {
    return this.http.get<Curso[]>(this.url)
  }

I would like to know how to transform this json into an object to read with *ngFOR in ANGULAR

json angular
  • 1

    He is already converted. Try to do so: this.service.getConfig().subscribe(dados => this.cursos = dados.content)

2 answers

0


If this JSON Voce receives this in String Voce format has to do a JSON Perse.

this.service.getConfig()
.subscribe(dados => this.cursos = JSON.parse(dados))

from what I saw in the format of JSON Voce will have to put the *ngFor="course of courses.content"

because content is the array to be iterated, ngFor iterates over arrays.

or else you take only the array

this.service.getConfig()
.subscribe(dados => this.cursos = dados.content)

dai o ng for fica "curso of cursos"

  • didn’t work no, brother, none of the 2 examples :(

  • Argument of type 'Curso[]' is not Assignable to Parameter of type 'string'. when I try to give parse . subscribe(data => this.courses = JSON.parse(data))

  • You tried this: this.service.getConfig(). subscribe(data => this.courses = data.content) and then iterate for direct into the courses? you can also try this: this.service.getConfig() . subscribe(data => this.courses = JSON.parse(data). content)

  • 1

    Solved, put; data = this.courses = data ["content"]

0

As you can see in the console outputs the type of this data is a object, you can easily know using the operator typeof.

let dados = {"content": [
    {"id": 1, "nomebd": "teste", "email": "[email protected]"},
    {"id": 2, "nomebd": "oi", "email": "oi"},
    {"id": 3, "nomebd": "joao", "email": "tg"},
    {"id": 4, "nomebd": "joao1", "email": "tg1"},
    {"id": 5, "nomebd": "kkkkk", "email": "kkk"},
    {"id": 6, "nomebd": "dae", "email": "dae"},
    {"id": 7, "nomebd": "coe", "email": "coe"},
    {"id": 8, "nomebd": "dadadad", "email": "dadadadada"}
]}

console.log(typeof dados);
console.log(dados.content);

Now as to *ngFor you can assign the return in a variable and iterate its values all:

dadosAPI;

this.service.getConfig()
.subscribe(dados => this.dadosAPI = dados.content)   // itera no objeto todo

=======================

this.service.getConfig()
.subscribe(dados => this.dadosAPI = dados.content.id)   // itera só nos ids

HTML 

<ul *ngFor="let dados of dadosAPI">
  <li>{{ dados.id }}</li>
  <li>{{ dados.nomebd }}</li>
  <li>{{ dados.email }}</li>
</ul>

  • he does not find the ". content"

  • Strange, you can see here how it works: https://stackblitz.com/edit/angular-meqiha

Browser other questions tagged json angular

You are not signed in. Login or sign up in order to post.