[dom-repeat :: dom-Wiederholung]: erwartetes Array für `Elemente`, gefunden Objekt

Question

Ich habe die folgende Vorlage:

<iron-ajax 
     id="ajax" 
     url="backend/api.php?operacion=contenidos&idf=[[datos.id]]&len=[[len]]" 
     handle-as="json" 
     verbose=true 
     last-response={{ajaxResponse}} 
     loading="{{cargando}}"> </iron-ajax> 

<template is="dom-repeat" items="[[ajaxResponse]]"> 

Die AJAX-Antwort enthält die folgende JSON (korrekt):

{ 
"1": [{ 
    "id": "6", 
    "idfolleto": "1", 
    "fila": "1", 
    "orden": "1", 
    "tipo": "carrousel", 
    "titulo": "", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}], 
"2": [{ 
    "id": "7", 
    "idfolleto": "1", 
    "fila": "2", 
    "orden": "1", 
    "tipo": "texto-imagenes", 
    "titulo": "Texto 1", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}, { 
    "id": "8", 
    "idfolleto": "1", 
    "fila": "2", 
    "orden": "2", 
    "tipo": "texto-imagenes", 
    "titulo": "Texto 2", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}], 
"3": [{ 
    "id": "9", 
    "idfolleto": "1", 
    "fila": "3", 
    "orden": "3", 
    "tipo": "texto-imagenes", 
    "titulo": "Texto 3", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}] 
} 

Aber ich erhalte eine Fehlermeldung:

[dom-repeat::dom-repeat] : expected array for items , found Object {1: Array[1], 2: Array[2], 3: Array[1]}

Warum? Danke!

Answer 1

Der Server sendet ein großes Objekt anstelle eines Arrays. Wenn Sie die Kontrolle über den Dienst haben, sollten Sie das Objekt vor dem Senden an den Client in eine Array-Serverseite konvertieren (effizienter, weniger verschwendete Bandbreite).

Wenn Sie den Dienst nicht ändern können (oder möchten), können Sie die Konvertierung im Client durchführen. Dies gibt Ihnen die Möglichkeit, die Datenmenge abzubilden und Daten zu verwerfen, die in Ihren Ansichten nicht benötigt werden.

Hier sind ein paar Optionen:

• einem observer auf verwenden, das eine andere Eigenschaft setzt, in dem Repeater gebunden (beispielsweise _data).

  // template 
  <iron-ajax 
       url="backend/api.php?operacion=contenidos&idf=[[datos.id]]&len=[[len]]" 
       last-response="{{ajaxResponse}}"> 
  </iron-ajax> 
  
  <template is="dom-repeat" items="[[_data]]">...</template> 
  
  // script 
  Polymer({ 
      properties: { 
      ajaxResponse: { 
       type: Object, 
       observer: '_ajaxResponseChanged' 
      }, 
  
      _data: Array 
      }, 
  
      _ajaxResponseChanged: function(r) { 
      // get data of type 'texto-imagenes' only 
      this._data = Object.keys(r) 
           .map(key => ({key, values: r[key].filter(v => v.tipo === 'texto-imagenes')})) 
           .filter(x => x.values.length); 
      }, 
      ... 
  }); 
  

• a computed property oder computed binding verwenden, die den Datensatz auf basierend berechnet.

  // template 
  <iron-ajax 
       url="backend/api.php?operacion=contenidos&idf=[[datos.id]]&len=[[len]]" 
       last-response="{{ajaxResponse}}"> 
  </iron-ajax> 
  
  // computed property 
  <template is="dom-repeat" items="[[_data]]">...</template> 
  
  // OR computed binding 
  <template is="dom-repeat" items="[[_computeData(ajaxResponse)]]">...</template> 
  
  // script 
  Polymer({ 
      properties: { 
      ajaxResponse: Object, 
  
      _data: { 
       computed: '_computeData(ajaxResponse)' 
      } 
      }, 
  
      _computeData: function(r) { 
      // get data of type 'texto-imagenes' only 
      return Object.keys(r) 
         .map(key => ({key, values: r[key].filter(v => v.tipo === 'texto-imagenes')})) 
         .filter(x => x.values.length); 
      }, 
      ... 
  }); 
  

plunker