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

问题

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!

回答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

来源：https://stackoverflow.com/questions/40824121/dom-repeatdom-repeat-expected-array-for-items-found-object

标签

polymer