CODEWITHSUNDEEP
polymer-1.0
redeemefy
redeemefy

Reputation: 4849

Expected array for `items` polymer

I'm learning Polymer 1.0 and I'm trying to pull weather data from an api. At the start I hardcoded the URL and I'm able to get the data since I can see it in the dev console. Now I'm trying to do a dom-repeat but I'm getting a weird error in the console:

[dom-repeat::dom-repeat]: expected array for 'items', found Object {city: Object, cod: "200", message: 0.0058, cnt: 3, list: Array[3]} polymer.html:3923

I have my index.html that imports webcomponents and the weather.html file I'm working with. Following I'm going to paste the code of both files.

Index.html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

  <title>Weather</title>
  <script src="bower_components/webcomponentsjs/webcomponents.min.js">    </script>
  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="bower_components/weather-forecast/weather-forecast.htm">
 <link rel="stylesheet" href="css/mystyle.css">
 </head>
   <body class="fullbleed layout vertical">
     <weather-forecast></weather-forecast>
   </body>
 </html>

weather-forecast.html:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">

<dom-module id="weather-forecast">
    <style>
     :host{
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    </style>

<template>

    <iron-ajax
        auto
        handle-as="json"
        url="http://api.openweathermap.org/data/2.5/forecast?q=la%20vergne,us&units=imperial&appid=2de143494c0b295cca9337e1e96b00e0&cnt=3"
        last-response="{{response}}">
    </iron-ajax>

    <template is="dom-repeat" items="{{response}}">
        <div>
            <p>{{item.list.main.temp}}</p>
            <p>{{item.city.name}}</p>
        </div>
    </template>
</template>
</dom-module>

<script>
Polymer({
    is: 'weather-forecast',

    properties: {
    }
});
</script>

What is wrong in this code????

Upvotes: 1

Views: 2663

Answers (2)

Niklas
Niklas

Reputation: 1299

I encountered this problem when working with Firebase and Polymer.
In this case it is good to inspect your data that you want to hand over to the dom-repeat.

Luckily it is quit simple to convert (in my case an object to an array)..

Object.values()

in other cases you may want to use..

Array.from()

You can read more about both methods in here:
Object.values()
Array.from()

However, it is important to know that both ways are not support in Internet Explorer

Upvotes: 0

MrK
MrK

Reputation: 662

The first part of the error message should get you started:

[dom-repeat::dom-repeat]: expected array for 'items'

Which leads you to this line, as this is your dom-repeat which takes an 'items':

<template is="dom-repeat" items="{{response}}">

The issue you're having is that response should be an array, but it isn't. From the end of the error message it looks like response is actually some JSON:

found Object {city: Object, cod: "200", message: 0.0058, cnt: 3, list: Array[3]}

The JSON seems to contain an array though (list), so maybe this is what you need? Try updating to:

<template is="dom-repeat" items="{{response.list}}">

Upvotes: 1

Related Questions