From this iron-ajax element:
<iron-ajax
id="ajax"
url="..."
handle-as="json"
verbose=true
last-response={{ajaxResponse}}
loading="{{cargando}}">
</iron-ajax>
I get this iron-ajax response:
{
"id": "3",
"idcontenido": "9",
"imagenes": ["oneimage.png", "anotherimage.png"],
"tipo_imagen": "img-circle",
"html": "Lorem ipsum"
}
And I need to implement a nested dom-repeat structure in order to iterate items from imagenes attribute. This is my code:
<template is="dom-repeat" items="[[ajaxResponse]]" as="registro">
<template is="dom-repeat" items="[[registro.imagenes]]" as="imagen">
<img class="[[registro.tipo_imagen]]" src="img/[[imagen]]" alt="" width="140" height="140" />
</template>
</template>
But I get this error:
[dom-repeat::dom-repeat]: expected array for 'items', found Object {id: "3", idcontenido: "9", imagenes: Array[2], tipo_imagen: "img-circle", html: "Lorem ipsum"}
Why?
Thanks!
The <dom-repeat> can only iterate over arrays, so you can't pass objects to it. You're seeing the expected array error message because you're binding <dom-repeat>.items to ajaxResponse, which is an object.
In the first question, your service was sending an object of array items:
{
"1": [{"id": "1"}, {"id": "2"}],
"2": [{"id": "3"}],
...
}
instead of an array:
[
[{"id": "1"}, {"id": "2"}],
[{"id": "3"}],
...
]
In this question, your service is sending a single item object:
{"id": "1"}
instead of an array:
[{"id": "1"}]
If ajaxResponse is really supposed to be a single item object, you could fix your template by just removing the outer <dom-repeat>, binding directly to ajaxResponse.imagenes:
<template is="dom-repeat" items="[[ajaxResponse.imagenes]]" as="imagen">
<img class="[[registro.tipo_imagen]]" src="img/[[imagen]]" alt="" width="140" height="140" />
</template>
On the other hand, if ajaxResponse is supposed to be an array, you'll need to either fix that in your service, or convert it in the client, using the techniques I described in the first question.
Related
Before I write a service to get json, I just want to use some dummy json to test the front end. What's the correct way to iterate through json with ngFor? I tried the code below with a simple interface.
In the component.ts file (ngOnInit()):
var jsonSample = {
"name": "sample1",
"content": [
{
"id": "3",
"name": "Test",
"value": "45"
},
{
"id": "4",
"name": "Test2",
"value": "60",
}]
}
var items: Array<IContent> = jsonSample.content;
Then in the HTML:
<tr *ngFor='let content of items'>
<td>{{content.name | lowercase}}</td>
<td>{{content.id}}</td>
<td>{{content.value}}</td>
</tr>
Should I be trying to use JSON.parse instead?
Your *ngFor looks fine as far as json object traversal is concerned.
You do not need to do JSON.parse here as you have set an object directly.
In the case of receiving response from a service check here. You will be doing res.json() to parse and get json data from the Response object.
#torazaburo got it. I just had to change:
var items: Array<IContent> = jsonSample.content;
to
items: IContent[];
this.items = jsonSample.content;
I've got a list of items generated by *ngFor in Angular2.
I want each of the items to work as a link to the full page with description of that item.
The generated data is retrieved via json.
As I want to use the items as links, I guess they should have router parameters like that [routerLink]="['/items', item.description]" in order to redirect users to the description page.
The question is how to pass such parameters via json (I can't bind them directly to the link in my html) ?
My item structure (div itemBlock supposed to work as a link):
<div class="itemBlock" *ngFor="let item of items">
<img src="{{item.image}}" alt="Item image" class="item--image">
<h3 class="item--name">{{item.name}}</h3>
<span class="item--number">{{item.number}}</span>
</div>
Json structure:
[
{
"id":"Item 1",
"name": "Item 1 Name",
"image": "./item1.jpg",
"number": "Number 1"
},
{
"id":"Item 2",
"name": "Item 2 Name",
"image": "./item2.jpg",
"number": "Number 2"
},
...,
...
]
I want to read a json file which is present locally in my system, in my polymer element. Currently i have put the json structure in task property of my element( as a first step).I am using 'dom-repeat' to parse through the json. But still cannot see anything in output.
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span>{{item}}</span></li>
</template>
<template is="dom-repeat" tasks="{{task}}">
<li><span>{{task.task.name}}</span></li>
</template>
</ul>
Above is my !-template-! of the polymer element. Where i am trying to read an array i.e {{items}} and a json i.e {{task}}
Below is the script :
<script>
(function() {
'use strict';
Polymer({
is: 'my-list',
properties: {
items: {
type: Array,
notify: true
},
task:{
type: Array,
value: function () { return []; } // Default value
}
},
ready: function() {
this.items = [
'Responsive Web App boilerplate',
'Iron Elements and Paper Elements',
'End-to-end Build Tooling (including Vulcanize)',
'Unit testing with Web Component Tester',
'Routing with Page.js',
'Offline support with the Platinum Service Worker Elements'
];
this.task=[{
"task": {
"name": "Fan",
"rules": [{
"name": "Check Blades",
"id": "1",
"steps": [{
"name": "Check motor",
"operator": "OR",
"number": "1",
"substeps": [{
"name": "SubStep1",
"function": "code",
"expression": "(FAULT_CODE) == {err05,err07,err06}",
"number": "1",
"timeperiod": "86400000"
}]
}]
}]
}
}];
}
});
})();
I am able to see the array content i.e this.items but not the json contents. COuld anyone tell me where am I going wrong ? Below is the screenshot of the output where you can see the {{items}} but no {{task}} details.
The browser doesn't allow to read files that are locally on your system. The only thing you can do is to provide a file input that allows to choose files using a file picker and then read them from there. You can read them from your local system if the web server runs on your local system and serves that file to clients.
this.task is an array and so you'd need to use a computed binding to access its values.
See the relevant section in the docs for more info on how to do this.
There is following JSON structure given:
"filter": {
"1": {
"value": "swiss"
},
"2": {
"value": "google"
}
}
How to access the variable "value" via an index variable within a gsp template like this?
<g:each in="${...}" var="data" status="i">
${filter?.i?.value}
</g:each>
If your "key" there is a variable you can use a GString notation like for any other property referenced by variable:
${filter?."$i"?.value}
Is that what you are looking for? It's without index variable.
<g:each in="${filter}" var="data" status="i">
${data.value.value}
</g:each>
I have some json that looks like this:
{{...},
"skills": [{
"languages": ["Java", "JavaScript", "C", "HTML5", "CSS3", "PHP", "Python"],
"j2ee": ["JSP", "Struts", "Tiles"],
"servers": ["Apache Tomcat 5, 6", "Webshpere Application Server", "Node.js", "Django (Python framework)"],
"tools": ["Eclipse and Rational Application Developer", "Maven", "vim", "*nix CLI"],
"versions": ["Git", "MKS", "Accurev", "SubVersion", "CVS"]
}],
{...}}
and some handlebars in a partial that looks like this:
{{#each skills}}
<div id="{{this}}">
<ul>
{{#list this}}
<li>{{this}}</li>
{{/list}}
</ul>
</div>
{{/each}}
This obviously does not work, but my thought process was that I could iterate over the skills array programmatically so that I wouldn't have to put the keys in, and then iterate over each key's value (an array).
I know I could just do something like
{"skills":
[{"name": "languages",
"values":["Java",...]},
{"name": "j2ee",
"values":["JSP",...]},
{...}]}
but I'm wondering if there's a way to do it with the first structure.