3

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.
4
  • *ngFor="let item of chapters" Commented 23/11/2016 às 13:41
  • Obrigado pela observação! eu postei via celular e com isso muitos erros de digitação.
    – Anderson
    Commented 23/11/2016 às 16:25
  • Os chapters estão organizados de uma forma que o angular não consegue ler ["1":{object}, "2":{object}] você precisa deixar um array só de objects [{object},{object}] Commented 24/11/2016 às 5:07
  • de { "1": { "1": "...", "2": "..." } } seria melhor enviar do backend { "1": [{chapter:1, ....} , {chapter:2, ....}] } Commented 24/11/2016 às 5:11

2 Respostas 2

1

Pelo que pude simular aqui seu problema esta em JavaScript puro, veja o json é um objeto ou seja ainda que pareça um array aninhado ele não está neste formato.

Veja como transformar um objeto em array:

var obj = {1: 11, 2: 22};
var arr = Object.keys(obj).map(function (key) { return obj[key]; });

no caso o objeto que você está expondo chapters no mínimo ele deveria passar por um processo como este:

var arr = Object.keys(chapters[1]).map(function (key) { return chapters[1][key]; });

e mais uma coisa não adianta você definir o tipo de variável e depois setar um valor de tipo diferente o que prevalecerá será o ultimo tipo setado.

public chapters: Array<string>;
...
this.chapters = data[id].chapters[0];

Ao fazer isso chapters passará a ser um objeto não um array. faça um console.log(chapters); e observe bem este objeto no console, com os dados reais será mais fácil você ver o comportamento.

Espero ter ajudado.

Um Abraço.

1

Caso não consiga mexer na estrutura desse JSON para transformá-lo em um array, use o keyvalue pipe do Angular: https://angular.io/api/common/KeyValuePipe

<div *ngFor="let item of chapters | keyvalue">
    {{item.key}}:{{item.value}}
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .