I want to make multidimensional JSON array. So that when i filter the id i whould get data of the respective id:
for egs: ID 1022101 the view should be
<li>x</li>
<li>y</li>
<li>z</li>
<div ng-app="myapp">
<div ng-controller="w">
<ul ng-repeat="x in data | filter:1022101 ">
<li>{{x.file}}</li>
</ul>
</div>
</div>
controller:
var app = angular.module('myapp',[]);
app.controller('w',function($scope){
$scope.data = [
{"id":"1022101","file":["x","y","z"]},
{"id":"1022102","file":["xa","sy","fz"]}
];
});
Jsfiddle Demo
you can use | filter:{id:1022101} to filter fo the id
jsfiddle
If I understand correctly what you are trying to do then you can use something lik this:
<ul ng-repeat="(id, file) in data | filter:id:1022101 ">
<li>{{file.x}}</li>
<li>{{file.y}}</li>
</ul>
I am not 100% sure I wrote the filter correctly, but you have your value in the id so you can adjust the filter as you need.
If your file is an Json array, you can make another ng-repeat inside your ng-repeat like
<ul ng-repeat="(id, file) in data | filter:id:1022101 ">
<li ng-repeat="xFile in file">{{xFile}}</li>
</ul>
Related
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?
On my website, I want to make a navigation bar just like this, with categories (here 2012) and articles (here May - October). I've got a JSON object with all categories (id, name) and one with all articles (id, title, body, category), which angular gets for me.
The current HTML is as follows:
<!-- The angular controllers are already initialized before this piece of code -->
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries">
<!-- The link links to a function that sets the correct tab -->
<a href ng-click="tab.setTab({{infoentry.id}})">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
And the JavaScript:
app.controller('InfoController', ['$http', function($http){
var info = this;
info.infocategories = [];
info.infoentries = [];
// This all works correctly
$http.get(api + 'info_categories?pageSize=20&pageNumber=1').success(function(data){
info.infocategories = data.data;
});
$http.get(api + 'info_posts?pageSize=20&pageNumber=1').success(function(data){
info.infoentries = data.data;
});
}]);
However, as you can imagine, this code displays all entries under the categories, but I want only the entries that belong to the specific category to be displayed.
I'm relatively new to AngularJS, so any help is greatly appreciated. If there's any code lacking or unclear, please tell me. Thanks in advance!
Never mind, I already fixed it myself. I guess I was thinking too difficult...
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries" ng-show="infoentry.cat == infocategory.id">
<a href ng-click="tab.setTab(infoentry.id)">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
I'm new to AngularJS but I love the framework.
What I have right now, is a (stub) single page that loads json data.
JS
var merlinoApp = angular.module('merlino', []);
merlinoApp.controller('mainController', function ($scope, $http) {
...
$http.get('#Url.Action( "consoledatapull", "ConsoleElaborazioni")')
.then(function (res) {
$scope.jobs = res.data.jsonjobs;
$scope.clienti = res.data.jsonclienti;
$scope.console = res.data.jsonconsole;
});
...
});
HTML
<div ng-repeat="roll in jobs | orderBy:sortType:sortReverse | filter:searchJob | filter:searchCliente | filter:searchStato" class="console-row my-row">
...
<div class="console-cell-id console-cell console-cell-padding console-cell-no-border-sx">{{ roll.id }}</div>
...
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell-esito-selected' : collapsed}" class="console-cell-esito console-cell console-cell-no-border-sx">SHORT DESC</div>
<div ng-show="collapsed" class="console-cell-esito-long console-cell console-cell-no-border-sx">{{ roll.esito }}</divng-show></div>
</div>
This populates ng-repeat, and the ng-click shows/hides the `ng-show div.
So far so good(?).
What Ì'm trying to achieve, is to load json data into
<div ng-show="collapsed" class="console-cell-esito-long...
if
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell...
is clicked.
That is each div of ng-repeat, can be loaded with specific data:
<ul>
<li ng-repeat="logelem in jsonlog">
{{ logelem.log }}
</li>
</ul>
I thought about using a function:
<div ng-click="function(id)...
and then load json into a div identified by an id, so i used $index...
The result was, being able to load same data into all divs at once :/
Help would be appreciated.
My suggestion woudl be to add the information to the jobs elements itself.
So for example, the ng-click would become:
<div ng-click="loadData(id, roll)">CLICK ME</div>
and then the loadData would be something like:
$scope.loadData = function(id, roll){
// Do something
roll.result = result;
}
and then you can use the result from that object in the view like you would do in other places. You can then for example hide the object where you want the final result until the variable result is defined.
I think this will be the easiest solution.
Update from comments
Why not change the collapsed value in the method? Or you could use a $watch to listen to changes on the collapsed variable.
I'm trying to use ng-if in angular.js. I have a json file:
"data":[{
"status":"true",
"name":"blabla",
"group":true,
"group_id":"123gr",
"id":"xx1"
},{
"status":"true",
"name":"blabla2",
"group":false,
"id":"123gr",
"group_id":"null"
}]
And from this JSON I try to get a list of all groups (group in JSON must set be true) and then list group's elements. So I want to have a list that looks:
Group: blabla2.
Element 1: blabla. Status: true
I tried to list just a group name.. in this way:
<ul>
<div ng-repeat="resp in response.data">
<li ng-if="{{resp.group}} === 'false'">
Group: {{resp.name}}
</li>
</div>
</ul>
Unfortunately it does not work. Do you have any idea what I did wrong?
Thank you for your help,
Luke
Or you could remove those altogether if you don't need them by filtering them out of ng-repeat
<ul>
<li ng-repeat="resp in response.data | filter: {group: true}">
Group: {{resp.name}}
</li>
</ul>
Use like this
<ul>
<div ng-repeat="resp in response.data">
<li ng-if="!resp.group">
Group: {{resp.name}}
</li>
</div>
</ul>