Skip to main content
Editado: erros de digitação e alterações no código.
Fonte Link
Anderson
  • 43
  • 1
  • 5

Tenho um objetoarquivo 'nvi.json' que está desta forma:

[
 {
"abbrev" : "abbrev""gn",
"book" : "name""Gênesis",
"chapters": [
  {
  [
  "1": {
     {"1": {"1": "...", 
 "2": "..."}}, {"2": {"1": "...", "2": "..."}},
    }
  },
  {
    "2": {"1": 
 "...", "2": "..."}}, {"2": { "1": "...",
      "2": "..."}},
    }
  },
  {
    "3": {"1": 
 "...", "2": "..."}}, {"2": { "1": "...",
      "2": "..."}}
    }
  }
 ]
 }
]

E estou acessando assim:

export class BookPage {
public chapters: Array<string>;
private url: any = "../../assets/nvi.json";

constructor(public navCtrl: NavController, private NavParams: NavParams, public http: Http) {
let id = NavParams.get('id');

this.http.get(this.url).map(res => res.json())
  .subscribe(data => {
    this.chapters = data[id].chapters;chapters[0];
    console.log(this.chapters);
  });
  }

Que me'this.chapters' retorna todoso primeiro capítulo onde contem os capítulos certinhoversículos. 

Mas eu não estou conseguindo fazer um loop com os dados dentro de cada capítulo correspondente.destes versículos

<div *ngFor="let item for chapters; let i =of index">chapters">
 {{iitem}}

<!-- loop com os versículos -->
</div>

Console:

EXCEPTION: Error in ./BookPage class BookPage - inline template:33:5 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Tenho um objeto que está desta forma:

[
{
"abbrev" : "abbrev"
"book" : "name"
"chapters": 
    [
        {"1": {"1": "...", "2": "..."}}, {"2": {"1": "...", "2": "..."}},
        {"2": {"1": "...", "2": "..."}}, {"2": {"1": "...", "2": "..."}},
        {"3": {"1": "...", "2": "..."}}, {"2": {"1": "...", "2": "..."}}
    ]
}
]

E estou acessando assim:

export class BookPage {
public chapters: Array<string>;
private url: any = "../../assets/nvi.json";

constructor(public navCtrl: NavController, private NavParams: NavParams, public http: Http) {
let id = NavParams.get('id');

this.http.get(this.url).map(res => res.json())
  .subscribe(data => {
    this.chapters = data[id].chapters;
    console.log(this.chapters);
  });
  }

Que me retorna todos os capítulos certinho. Mas eu não estou conseguindo fazer um loop com os dados dentro de cada capítulo correspondente.

<div *ngFor="let item for chapters; let i = index">
{{i}}

<!-- loop com os versículos -->
</div>

Tenho um arquivo 'nvi.json' que está desta forma:

[
 {
"abbrev": "gn",
"book": "Gênesis",
"chapters": [
  {
    "1": {
      "1": "...", 
      "2": "..."
    }
  },
  {
    "2": { 
      "1": "...",
      "2": "..."
    }
  },
  {
    "3": { 
      "1": "...",
      "2": "..."
    }
  }
 ]
 }
]

E estou acessando assim:

export class BookPage {
public chapters: Array<string>;
private url: any = "../../assets/nvi.json";

constructor(public navCtrl: NavController, private NavParams: NavParams, public http: Http) {
let id = NavParams.get('id');

this.http.get(this.url).map(res => res.json())
  .subscribe(data => {
    this.chapters = data[id].chapters[0];
    console.log(this.chapters);
  });
  }

'this.chapters' retorna o primeiro capítulo onde contem os versículos. 

Mas eu não estou conseguindo fazer um loop destes versículos

<div *ngFor="let item of chapters">
 {{item}}
</div>

Console:

EXCEPTION: Error in ./BookPage class BookPage - inline template:33:5 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Fonte Link
Anderson
  • 43
  • 1
  • 5

Angular2 ngFor ajuda com loop

Tenho um objeto que está desta forma:

[
{
"abbrev" : "abbrev"
"book" : "name"
"chapters": 
    [
        {"1": {"1": "...", "2": "..."}}, {"2": {"1": "...", "2": "..."}},
        {"2": {"1": "...", "2": "..."}}, {"2": {"1": "...", "2": "..."}},
        {"3": {"1": "...", "2": "..."}}, {"2": {"1": "...", "2": "..."}}
    ]
}
]

E estou acessando assim:

export class BookPage {
public chapters: Array<string>;
private url: any = "../../assets/nvi.json";

constructor(public navCtrl: NavController, private NavParams: NavParams, public http: Http) {
let id = NavParams.get('id');

this.http.get(this.url).map(res => res.json())
  .subscribe(data => {
    this.chapters = data[id].chapters;
    console.log(this.chapters);
  });
  }

Que me retorna todos os capítulos certinho. Mas eu não estou conseguindo fazer um loop com os dados dentro de cada capítulo correspondente.

<div *ngFor="let item for chapters; let i = index">
{{i}}

<!-- loop com os versículos -->
</div>
1
2