[DOM-繰り返し:: DOMリピート]： `items`の予想される配列、見つかったオブジェクト

Question

Iは、以下のテンプレートを有する：

<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]]"> 

AJAX応答は、以下のJSON（修正）を含む：

を

{ 
"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 
}] 
} 

しかし、私はエラーを取得する：

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

なぜ？ ありがとう！

Answer 1

サーバーが配列の代わりに大きなオブジェクトを送信しています。サービスを管理している場合は、オブジェクトをクライアントに送信する前に配列のサーバー側に変換する必要があります（より効率的で、無駄な帯域幅はありません）。

サービスを変更できない（または変更したくない）場合は、クライアントで変換を実行できます。これにより、データセットをマップ削減し、ビュー内で不要なデータを破棄することができます。ここで

はカップルのオプションがあります

• は、リピータ（例えば、_data）にバインドされ、別のプロパティを設定し、そのにobserverを使用してください。

  // 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); 
      }, 
      ... 
  }); 
  

• に基づいてデータセットを計算computed propertyまたはcomputed bindingを使用します。

  // 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