So i loaded the json and now i cant display it and it says not well-formed. But i'm not really sure what to write in html.
here is my js:
app.controller('jsonController', function($scope, $http) {
$http.get('podaci.json').success(function(data) {
$scope.gradovi = data;
});
});
and html:
<div ng-controller = "jsonController">
<ol>
<li ng-repeat="gradovi in ponudjene">
{{gradovi.ponudjene}}
</li>
</ol>
</div>
and this is json:
{
"ponudjene": [
"Ada",
"Adaševci",
"Žitni Potok",
"Žitorađa",
"Zlatibor",
"Zlatica",
"Zlodol",
"Zlot",
"Zmajevo",
"Zminjak",
"Zrenjanin",
"Zubin Potok",
"Žuč",
"Zuce",
"Zvečan",
"Zvezdan",
"Zvonce",
"Đala",
"Đunis",
"Đurđevo",
"Đurđin"
],
"tacno": [
"Zvezdan",
"Zvezdan",
"Bor",
"Rudna Glava",
"Majdanpek"
],
"vreme": 100,
"oblast": "Istocna srbija"
}
Try like this
<ol>
<li ng-repeat="item in gradovi.ponudjene">
{{item}}
</li>
<li ng-repeat="item in gradovi.tacno">
{{item}}
</li>
<li>
{{gradovi.vreme}}
</li>
<li>
{{gradovi.oblast}}
</li>
</ol>
Not sure what your json data looks like, but your $scope is "gradovi", so your li should look something like this:
<li ng-repeat="item in gradovi">
{{item.name_of_field_in_your_json}}
</li>
UPDATE:
Now that I see your json data. Here is the fiddle:
http://jsfiddle.net/RkykR/778/
Found it!Thank u all for help! :)
<ol>
<li ng-repeat="item in gradovi.ponudjene track by $index">
{{item}}
</li>
</ol>
Related
I have JSON object:
content =
[
{
"id":1,
"name":"test",
"parent":{
"name":"test2",
"subParent":{
"name":"test3",
"subParent":{
"name":"test4",
"subParent":{
"name":"test5",
"subParent":null
}
}
}
}
}
]
How to iterate through each nested object and display the data in Angular?
I tried to do it with ngFor but it doesn't work
<ul>
<li *ngFor="let data of content">
{{data.id}}
<ul>
<li *ngFor="let p of data.parent">
{{p.name}}
</li>
</ul>
</li>
</ul>
You can try something like that, but recursive templates is for me, the right way to do that.
Regards,
I started working with angular recently and I'm trying to divide a list in two by their type and show it in two separated fields. My question is: can I do it by doing a for loop in the .ts file or there is an easier way?
HTML file:
<div class="ml-xs mr-xs my-flex-column">
<p>Interests:</p>
<ul style="list-style-type:disc;" *ngFor="let interests of item.profileInterest">
<li> {{ interests.name }} </li>
</ul>
</div>
<div class="ml-xs mr-xs my-flex-column">
<p>Behaviors:</p>
<ul style="list-style-type:disc;" *ngFor="let behaviors of item.profileInterest">
<li> {{ behaviors.name }} </li>
</ul>
</div>
.ts file:
public getCustomerProfile() {
this.blockUI.start("Loading");
this._service.getCustomerProfile(this.id)
.subscribe(
(data: RequestCustomerProfile[]) => {
if (data.length && data.length > 0) {
this.entityProfile = data;
} else {
this.entityProfile = [];
}
this.blockUI.stop();
},
error => {
console.log(error)
this.blockUI.stop();
}
);
}
One way to do this would be to treat the HTML file directly, just deal with it and check the "li" tag:
<div class="ml-xs mr-xs my-flex-column">
<p>Interest:</p>
<ul *ngFor="let interests of item.profileInterest">
<li *ngIf="interests.type == 'Interest'"> {{ interests.name }} </li>
</ul>
</div>
<div class="ml-xs mr-xs my-flex-column">
<p>Behavior:</p>
<ul *ngFor="let behaviors of item.profileInterest">
<li *ngIf="behaviors.type == 'Behavior'"> {{ behaviors.name }} </li>
</ul>
</div>
Hope this helps.
To do it in the .ts file you could do this:
get interests() {
return item.profileInterests.filter(interest => interest.type === 'Interest');
}
get behaviours() {
return item.profileInterests.filter(interest => interest.type === 'Behaviour');
}
(note that I have no idea of the structure of item.profileInterests, this is just a guess)
Then in the html you can use them like this:
<div class="ml-xs mr-xs my-flex-column">
<p>Interests:</p>
<ul style="list-style-type:disc;" *ngFor="let interest of interests">
<li> {{ interest.name }} </li>
</ul>
</div>
<div class="ml-xs mr-xs my-flex-column">
<p>Behaviors:</p>
<ul style="list-style-type:disc;" *ngFor="let behavior of behaviors">
<li> {{ behavior.name }} </li>
</ul>
</div>
This way when you want behaviours and interests elsewhere you can just use those getter variables (you don't need to call them with parentheses!).
I have a sample json,I need to create a sidebar using ul li tag and value comes from json.My json structure is something like this.
{"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}.I have already done in angularjs here http://plnkr.co/edit/D8M1U81tVz3UuzjWathk?p=preview , but This does not work in angular 6.Can anyone please help me,I am new in angular,Here is the code below
app.html
<ul *ngFor="(x, y) of items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li *ngFor="p of y.value">{{p}}</li>
</ul>
</li>
</ul>
app.ts
export class Heroes {
let items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}};
}
I suggest you to work with an iterable objects when you try to use *ngFor in your html component.
So, that's my solution:
<ul *ngFor="let parent of (items.filter | keyvalue)">
<li class="parent">{{ parent.key }}</li>
<ul *ngFor="let child of (parent.value.value | keyvalue)">
<li class="child">{{ child.value }}</li>
</ul>
</ul>
First of all I used the keyvalue pipe from angular (https://angular.io/api/common/KeyValuePipe) after that you are allowed to iterate your json object as you want without change it.
Also, here I leave an example of how it works (https://stackblitz.com/edit/angular-gqaaet)
You need to change the json format.
items = {"filter":
[{
"name":"Category1",
"value":["one","two","three"]
},
{
"name":"Category2",
"value":["four","five","six"]
}
]};
HTML
<ul *ngFor="let item of items.filter">
<li class="parent"><b>{{item.name}}</b></li>
<li class="child">
<ul>
<li *ngFor="let p of item.value">{{p}}</li>
</ul>
</li>
</ul>
The above code would work. *ngFor works with the iteration protocols, the json format you've added has map(filter) of map(category) of map(value) format, where the values are not obtained to be iterated.
JS fiddle: http://jsfiddle.net/ernestsoo22/qqgj9jf5/1/
I have a ng-repeat in my code like this:
<ul>
<li ng-repeat=" opt in courses">
{{$index}}
</li>
</ul>
With this, I am able to get the output of:
0 , 1 , 2 , 3
Problem: Using a filter like such does not get the $index that I want:
<ul>
<li ng-repeat=" opt in courses | filter:{code:'INF'}" >
{{$index}}
</li>
</ul>
With this filter I get the $index of (refer fiddle):
0 , 1
Instead of this, what I am looking for is to get the actual index of the courses json object. So according to the filter, the output would be:
2 , 3
How can I achieve this while using a filter?
Use ng-if="opt.code.indexOf('INF')>=0" in li to check the filter to check the INF present
function TodoCtrl($scope) {
$scope.courses = [
{"code":"ICT10001","description":"Problem Solving with ICT","credits":"12.5","type":"Core"},
{"code":"COS10005","description":"Web Development","credits":"12.5","type":"Core"},
{"code":"INF10003","description":"Introduction to Business Information Systems","credits":"12.5","type":"Core"},
{"code":"INF10002","description":"Database Analysis and Design","credits":"12.5","type":"Core"}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat=" opt in courses" ng-if="opt.code.indexOf('INF')>=0" >
{{$index}}
</li>
</ul>
</div>
</div>
<li ng-repeat=" opt in courses">
<span ng-if="opt.code==='INF'">{{$index}}</span>
</li>
Does that fix it?
I have an array of objects:
objects = [
{
name: "a",
val: 1
},
{
name: "b",
val: 2
}
]
I'm trying to produce the following HTML with Handlebars:
<ul>
<li> ... </li>
<li> ... </li>
</ul>
If I didn't need the hash, I would do it like this:
<ul>
{{#objects}}
<li> <a {{bindAttr href="name"}}>...</a> </li>
{{/objects}}
</ul>
I can't use href="#name" or href=#"name". Is there a way to get the hash in front of the name property?
<ul>
{{#each item in objects}}
<li> ... </li>
{{/each}}
</ul>
But i'm not sure what you're doing, you probably want to use the link-to helper