[dom-repeat::dom-repeat]: expected array for `items`, found Object

Question

I have the following template:

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

The AJAX response contains the following JSON (correct):

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

But I get an error:

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

Why? Thanks!

Answer 1

The server is sending a large object instead of an array. If you have control of the service, you should convert the object into an array server-side before sending it to the client (more efficient, less wasted bandwidth).

If you can't (or don't want to) modify the service, you could perform the conversion in the client. This gives you the opportunity to map-reduce the dataset, discarding data that is unneeded in your views.

Here are a couple options:

• Use an observer on ajaxResponse that sets another property, bound in the repeater (e.g., _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);
    },
    ...
  });
  

• Use a computed property or computed binding which computes the dataset based on ajaxResponse.

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