We Keep Coding

How to show all data of Object with Vue.js

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

need to display deeper item in ng-repeat AngularJs

Get an object from server. look like this:
"courses": [
{
"id": 1,
"name": "piano",
"classes": [
{
"id": 1,
"name": "piano1",
},
{
"id": 2,
"name": "piano2",
}
],
"classes_count": 2,
"feedbacks_count": 4
},
]
JS: there I get data to Scope
httpService.getService(url, data).then(function(res) {
$scope.datas = res.body.courses;
console.log($scope.datas);
})
I need to print classes id in ng-repeat. try to do this
<ul class="dropdown-list" style="display: none;">
<li ng-repeat="course in datas | filter:{'id': showprofile}:true ">{{course.classes.id}}</li>
</ul>
But it's work when I print {{course.classes}} and I get an array with 2 objects. How to show in "li" element course.classes.id ?

You have array in array, so you have got 2 ng-repeats: first iterating over courses and second over classes.
<ul ng-repeat="course in datas" class="dropdown-list" style="display: none;">
<li ng-repeat="class in course.classes">{{class.id}}</li>
</ul>

You need to add another loop for nested elements
<ul class="dropdown-list" style="display: none;">
<li ng-repeat="course in datas" ng-if='$first'> {{course.id}}</li>//
<ul ng-if="course.classes.length">
<li ng-repeat="classes in course"> {{course.classes.id}}</li>
</ul>
</ul>

Filter an ng-repeat based on parent ng-repeat

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>

How to render an arbitrarily deep nested list?

Suppose that I have the following JSON array:
tree = [{
name: "A",
children: [{
name: "AA",
children: []
}, {
name: "AB",
children: []
}]
}, {
name: "B",
children: [{
name: "BA",
children: []
}, {
name: "BB",
children: []
}]
}]
Moreover, suppose that I want to construct the following HTML:
<ul>
<li>
<label>A</label>
<ul>
<li>
<label>AA</label>
<ul></ul>
</li>
<li>
<label>AB</label>
<ul></ul>
</li>
</ul>
</li>
<li>
<label>B</label>
<ul>
<li>
<label>BA</label>
<ul></ul>
</li>
<li>
<label>BB</label>
<ul></ul>
</li>
</ul>
</li>
</ul>
I can achieve this using Knockout as follows:
<ul data-bind="foreach: tree">
<li>
<label data-bind="text: name"></label>
<ul data-bind="foreach: children">
<li>
<label data-bind="text: name"></label>
<ul></ul>
</li>
</ul>
</li>
</ul>
However, this does not work for arbitrarily-deep nested lists. What can I do?

Use a recursive template, e.g. like this:
var tree = {
subItems: [
{
name: "A",
subItems: [ { name:"AA", subItems: [] }, { name:"AB", subItems: [] }, { name:"AC", subItems: [] } ]
},
{
name: "B",
subItems: [ { name:"BA", subItems: [] }, { name:"BB", subItems: [{name:"BB1 (etc)", subItems: []}] } ]
}
]
};
ko.applyBindings(tree);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script type="text/html" id="myTemplate">
<ul data-bind="foreach: $data">
<li>
<label data-bind="text: name"></label>
<div data-bind="template: { name: 'myTemplate', data: subItems }"></div>
</li>
</ul>
</script>
<div data-bind="template: { name: 'myTemplate', data: $root.subItems }"></div>

How to repeat data in nested ul li ul li list item in angular js?

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