I would like to show a list in my HTML all the data contains in my Object.
This is my HTML
<template>
<div id="builder">
<div class="container">
<ul>
<li v-for="item in items">{{ item.firstName }}
<ul>
<li>{{ item.secondLevel.secondName }}
<ul>
<li>{{ item.secondLevel.thirdLevel }}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
This is my data
data () {
return {
items: [
{ firstName: 'HTML',
secondLevel: [
{
secondName: 'HEADER',
thirdLevel: ['title', 'subtitle']
},
{
secondName: 'ARTICLE',
thirdLevel: ['paragraph', 'svg', 'image']
}
]
},
{ firstName: 'CSS',
secondLevel: [
{
secondName: 'SecondName CSS',
thirdLevel: ['thirdLevel CSS', 'thirdLevel CSS']
},
{
secondName: 'SecondName CSS 2',
thirdLevel: ['thirdLevel CSS 2', 'thirdLevel CSS 2']
}
]
}
]
}
}
I want to show something like this:
HTML
HEADER
title
subtitle
ARTICLE
paragraph
svg
image
CSS
SecondName CSS
thirdLevel CSS
thirdLevel CSS
SecondName CSS 2
thirdLevel CSS 2
thirdLevel CSS 2
Thanks!
Please check this updated code,
Steps to do,
just make v-for for SecondLevel Items and v-for for Third level as well
<template>
<div id="builder">
<div class="container">
<ul>
<li v-for="item in items">{{ item.firstName }}
<ul v-for="d in item.secondLevel">
<li>{{ d.secondName }}
<ul v-for="t in d.thirdLevel">
<li>{{ t }}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
You are on a right track. In order to solve this question you need to modify the nested v-for loops.
For a working solution I came up with this:
<div id="vue-instance">
<ul>
<li v-for="item in items">
{{ item.firstName }}
<ul>
<li v-for="secondLevel in item.secondLevel">
{{secondLevel.secondName}}
<ul>
<li v-for="thirdLevel in secondLevel.thirdLevel">
{{thirdLevel}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JSFiddle
Related
<ul class="ulItems" v-for="item in listingItems" :key="item.channels">
<li class="liItems">
{{ item.itemName }}
</li>
</ul>
I want to display an image in cases where the list does not contain an object with that name
If I understood you correctly, try like following snippet:
new Vue({
el: '#demo',
data() {
return {
listingItems: [{itemName: 'aaa', channels: 1}, {itemName: '', channels: 2}, {itemName: 'bbb', channels: 3}],
noNameImg: 'https://picsum.photos/50'
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul class="ulItems" v-for="item in listingItems" :key="item.channels">
<li class="liItems" v-if="item.itemName">
{{ item.itemName }}
</li>
<li class="liItems" v-else>
<img :src="noNameImg" />
</li>
</ul>
</div>
Scratching my head now for 2 hours. Maybe I'm tired or maybe I don't understand what I'm doing. Anyway, I've got an array of blogposts. Which looks like this:
[
{
'title': 'first post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' }
]
},
{
'title': 'second post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' },
{ 'name': 'Tag 3', 'slug': 'tag-3' }
]
},
{
'title': 'third post',
'tags': [
{ 'name': 'Tag 2', 'slug': 'tag-2' }
]
}
]
And also an array containing my tags like this.
[
{'title': 'Tag 1', 'slug':'tag-1'},
{'title': 'Tag 2', 'slug':'tag-2'},
{'title': 'Tag 3', 'slug':'tag-3'},
{'title': 'Tag 4', 'slug':'tag-4'}
]
And I am doing an regular angular ng-repeat like this to show all my blogpost tags:
<ul>
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
</li>
</ul>
Now, I would like to add a nested repeater which only shows blogposts from the variable blog.posts that contains the current tag.
Something like this:
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: tag.slug IN post.tags">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
But I cannot seem to get it working. I think it SHOULD be easy. Because in my mind it is a quite simple task. to filter out unwanted results based on a string and an array.
Wanted/Exptected output:
<ul>
<li>
<h3>Tag 1</h3>
<ul>
<li>first post</li>
<li>second post</li>
</ul>
</li>
<li>
<h3>Tag 2</h3>
<ul>
<li>third post</li>
</ul>
</li>
<li>
<h3>Tag 3</h3>
<ul>
<li>second post</li>
</ul>
</li>
</ul>
You could make a custom filter instead of using "filter: expression".
What you can do create a filter that takes the tags and posts as arguments and returns the array with filtered items.
myApp.filter('myFilter', function () {
return function (posts, tag) {
var newPosts = [];
for (var i = 0; i < posts.length; i++)
for (var j = 0; j < post.tags.length; j++)
if (posts[i].tags[j].slug === tag.slug)
newPosts.push(posts[i]);
return newPosts;
}
});
And then
<li ng-repeat="post in blog.posts | myFilter: tag">
<span>{{ post.title }}</span>
</li>
Using the built-in functionality, you can do it like this:
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
See it working here: https://plnkr.co/edit/pQZse1hUnnzyfneIlpMu?p=preview
Documentation for the filter is here: https://docs.angularjs.org/api/ng/filter/filter
Or, if you want Tag 4 to be hidden because it has no matching posts, you could do something like this:
<div ng-controller="BlogComponent as blog">
<div ng-repeat="tag in blog.tags">
<div ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<h3 ng-if="$first">{{ tag.title }}</h3>
<li>{{ post.title }}</li>
</div>
</div>
</div>
My JavaScript:
this.items = [
{name: 'Amsterdam1', id: '1'},
{name: 'Amsterdam2', id: '2'},
{name: 'Amsterdam3', id: '3'}
];
My HTML:
<ul>
<li *ngFor="#item of items" id={{item.id}}>
{{ item.name}}
</li>
</ul>
I want to assign a dynamic id to each element, but can't get it to work. The name is showing up but the id is not.
the way you said works, Angular 2.0.0.beta.8.
in this case you can use for example:
[id]="item.id"
[attr.id]="item.id"
id={{item.id}}
<ul>
<li *ngFor="#item of items" #elem [id]="item.id">
{{ item.name}} ID: {{elem.id}}
</li>
</ul>
<ul>
<li *ngFor="#item of items" #elem [attr.id]="item.id">
{{ item.name}} ID: {{elem.id}}
</li>
</ul>
<ul>
<li *ngFor="#item of items" #elem id={{item.id}}>
{{ item.name}} ID: {{elem.id}}
</li>
</ul>
Plunker
You can look here for more information in Template syntax.
https://angular.io/guide/cheatsheet
All the methods provided by #AngelAngel are correct but just to explain why to use [attr.id] posted as answer.
Angular by default uses property binding. To tell Angular explicitly to use attribute binding, we use instead:
<ul>
<li *ngFor="#item of items" #elem [attr.id]="item.id">
{{ item.name}} ID: {{elem.id}}
</li>
</ul>
With attr.id you have to explicitly opt in to attribute binding because attribute binding is expensive. Attributes are reflected in the DOM and changes require for example to check if CSS selectors are registered that match with this attribute set. Property binding is JS only and cheap, therefore the default.
<ul>
<li *ngFor="#item of items" attr.id={{item.name}}>
{{ item.name}}
</li>
</ul>
This should work (worked for me on angular2).
I found the answer. I can use [attr.id] tag on the 'li' tag.
I'm trying to follow a tutorial on Vue.js, but the code for the first lesson isn't working for v-repeat. I'm trying to display the data in the tasks object:
<div id="tasks">
<div>
<h1>Tasks</h1>
<ul class="list-group">
<li v-repeat="task: tasks">
{{ task.body }}
</li>
</ul>
</div>
</div>
<script>
new Vue ({
el: '#tasks',
data: {
tasks: [
{ body: 'Go to store', completed: false }
]
}
})
</script>
<li v-for="task in tasks">
v-repeat was deprecated in 1.0:
https://github.com/vuejs/vue/issues/1200
I am creating a new ul>li>ul>li list and I want to repeat the data according to the list items.
My code is like this:
My Angular code is:
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function ($scope) {
$scope.items = [
{
title:"book" [
{subtitle:"name", description:"____Book_______"}
],
description: "Some Book is very Good."
},
{
title:"book_2" [
{subtitle:"name", description:"____Book_2______"}
],
description: "2Some Book is very Good."
}
];
});
My HTML code is:
<body ng-app="myFapp">
<ul ng-controller="myControler">
<li ng-repeat="item in items">
<div>{{item.title}}</div>
<div>{{item.description}}</div>
<ul>
<li>
<div>{{subtitle.title}}</div>
<div>{{item.description}}</div>
</li>
</ul>
</li>
</ul>
</body>
My Plunker
Your JSON is improper, It needs to be in this format:
JSON:
$scope.items = [
{
"title":"book" ,"subtitle":[
{"subtitle":"name", "description":"____Book_______"}
],
"description": "Some Book is very Good."
},
{
"title":"book_2" , "subtitle":[
{"subtitle":"name", "description":"____Book_2______"}
],
"description": "2Some Book is very Good."
}
];
And then in your html markup you need to reference it like this (nested ng-repeat):
<ul ng-controller="myControler">
<li ng-repeat= "item in items">
<div>{{item.title}} </div>
<div>{{item.description}}</div>
<ul>
<li ng-repeat="subtitle in item.subtitle">
<div>{{subtitle.subtitle}} </div>
<div>{{subtitle.description}}</div>
</li>
</ul>
</li>
</ul>
Working Plunkr