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????
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}}">
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
Related
I have written the following code in the HTML file.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Welcome To Project Tracker</h1>
<p>Addition of Two Numbers (100+100) is - {{100+100}}</p>
</body>
</html>
The binding expressions do not return the value instead they are shown as it is.
When i run this code, i find the error ''Node' is undefined.'
I have used NuGet packages to install the Angular Js and JQuery into the scripts folder.
Make sure that your browser's document mode is greater than IE 8
If it's IE, try this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Should it be possible to select content from a child element in Polymer 1? Can't find anything about it in the docs, but this doesn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://polygit.org/polymer+:master/components/">
<link rel="import" href="polymer/polymer.html">
<dom-module id="my-element">
<template>
<content select="#aaa"></content>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: "my-element"
});
});
</script>
</dom-module>
</head>
<body>
<my-element>
<div>
<div id="aaa">zzzzzzzzzzz</div>
</div>
</my-element>
</body>
</html>
No way !! everything were changed in Polymer 1.
This docs will help you a lot: Polymer Elements docs
I have done a program which does autocomplete using angucomplete statement.but iam unable to get when i enter any key it does not displaying it with scrollbar whne number of matches are done.CAn anyone help me to solve this
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Autocomplete using remote searching</title>
<script src="angularfiles/angular.min.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="Jsfiles/autourl.js"></script>
<script src="angularfiles/angucomplete-alt.js"></script>
<link rel="stylesheet" href="angularfiles/style.css" />
<link rel="stylesheet" href="angularfiles/angucomplete-alt.css" />
<link rel="stylesheet" href="angularfiles/bariol.css" />
</head>
<body ng-controller="controller">
<angucomplete-alt id="members" pause="400" placeholder="Type to start"
selected-object="testObj" maxlength="40"
remote-url="http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address="
remote-url-data-field="results"
title-field="formatted_address"
minlength="1"
discription-field="status"
/>
</body>
</html>
//JSfile
var app=angular.module("myapp",['ui.bootstrap','angucomplete-alt']);
app.controller("controller",function(){
});
To show scrollbar, you need to set the following css style to angucomplete-dropdown class, and then the directive automatically picks it up.
.angucomplete-dropdown {
overflow-y: auto;
max-height: 200px; // your preference
}
See example #1
For more Info: https://github.com/ghiden/angucomplete-alt
I make simple example of ng-repeat when I used ng-repeat it works fine .But when I use collection-repeat it gives me this error
Controller '$ionicScroll', required by directive 'collectionRepeat', can't be found!
could you please help me solving this error
Here is my my plunker
http://plnkr.co/edit/LjADQj07M4cEpTQP3WzS?p=preview
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Invoices Grid</title>
<!--Stylesheets-->
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!--Scripts-->
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="a">
<div class="row" collection-repeat="n in names">
<div class="col">{{n.name}}</div>
<div class="col">{{n.lasename}}</div>
</div>
</body>
</html>
First post Google post :
http://forum.ionicframework.com/t/error-compile-ctreq-controller-ionicscroll-required-by-directive-collectionrepeat-cant-be-found/4879
collection repeat needs a scrolling system.
Therefore, suround your code with <ion-content overflow-scroll="true" >
See updated plnkr : http://plnkr.co/edit/LuHPy3lbqYBlg35iYuw1?p=preview
I'm a newbie with AngularJS. I used it yesterday for the first time (loving it!), so I apology if this is a dumb question.
I'm looping through a set of data called "leagues" mapping my HTML template with no issues. The data for the 3 leagues, including the logo appears correctly, however, the browser console keeps telling me the 3 logos doesn't exist (like the mapping hasn't taken place yet...)
Any ideas why is this happening? Thanks in advance!
Error:
HTML:
<!doctype html>
<html ng-app id="ng-app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="choose-league" class="section row">
<div ng-repeat="league in leagues">
<div class="col-md-4 league" ng-click="getTeams(league.abbr)">
<img id="{{league.id}}" src="{{league.logo}}" alt="{{league.id}}">
</div>
</div>
</div>
</body>
</html>
JavaScript (AngularJS):
function dataController ($scope) {
// Set of leagues we want data from
$scope.leagues = [
{id: 'champions', abbr: 'uefa.champions', logo: '/img/champions-logo.png'},
{id: 'liga', abbr: 'esp.1', logo: '/img/liga-logo.png'},
{id: 'premier', abbr: 'eng.1', logo: '/img/premier-logo.png'}
];
}
You should use the ng-src directive instead of the src attribute on your images. The purpose of this directive is addressing precisely the issue you're experiencing.
[EDIT]
As per the question WHY this is happening, the HTML is parsed verbatim (with the curly brackets) before angular.js kicks in and does its magic, making the browser complain about an invalid image url under the src attribute.