through ng-repeat I want to plot videos in a defined order according to the id number (from 1 to 5).
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="vidObj in videoObjects | orderBy: 'id'">
<span>{{vidObj.id}}</span>
</div>
</div>
I try to apply the filter orderBy, but apparently is not working properly. Do you have an idea of what I am doing wrong? This is a JSfiddle with the complete code.
Thanks in advance for your replies!
EDIT: Thank you for your replies, but the json file can not change.
The Javascript :
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.videoObjects = {
"Frank": {
"id": 1
},
"Gerard": {
"id": 2
},
"Rein": {
"id": 3
},
"Ida": {
"id": 4
},
"Ellen": {
"id": 5
}
};
$scope.arr = Object.keys($scope.videoObjects).map(function(k) { return $scope.videoObjects[k] });
console.log($scope.arr);
});
and the HTML
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="vidObj in arr | orderBy: 'id'">
<span>{{vidObj.id}}</span>
</div>
</div>
I updated your fiddle with this code.. It is working well.
Here is the link http://jsfiddle.net/tirthrajbarot/fc16op6u/39/
I modified your Json and it works
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.videoObjects = [
{
"name": "Frank",
"id": "1"
},
{
"name": "Gerard",
"id": "2"
},
{
"name": "Rein",
"id": "3"
},
{
"name": "Ida",
"id": "4"
},
{
"name": "Ellen",
"id": "5"
}
]
});
I think that the built-in orderBy filter works with arrays.
The documentation says "The collection can be an Array or array-like object (e.g. NodeList, jQuery object, TypedArray, String, etc)."
Check this example in the documentation that says "Example Ordering a table with ngRepeat".
Try a valid json, somthing like:
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.videoObjects = [
{
"id": 1,
"Frank":'name'
},
{
"id": 2,
"Gerard":'name'
}
];
});
working fiddle
Related
I am new to AngularJs. I am having problem in appending options to select boxes created by javascript. Following is my code.
var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>');
var temp = $compile(inputElements)($scope);
$('#projOrder').append(temp);
$scope.object = object;
//for(var opt=0; opt<selOptLabels.length; opt++) {
$('.sel').append('<option ng-repeat="obj in object" value="'+
{{obj.value}}+'">'+{{obj.value}}+'</option>');
I am getting this error:- SyntaxError: invalid property id
Hi, I am posting json example. This is just a small part of json in my case.
"ProjectOrder": {
"Connect direct required": {
"value": "N",
"id": "STR_15523_62"
},
"Cores": {
"value": ".5",
"id": "NUM_15523_50"
},
"Permanent data in GB": {
"value": "100",
"id": "NUM_15523_56"
},
"Description": {
"value": "AZBNL azbngb",
"id": "STR_15523_2"
},
"Order Id": {
"value": "15523",
"id": "INT_15523_96"
},
"Project cost center": {
"value": "N",
"id": "STR_15523_66"
},
"Project debitor": {
"value": "N",
"id": "STR_15523_64"
},
"Project OE": {
"value": "N",
"id": "STR_15523_57"
},
"Project SITE": {
"value": "N",
"id": "STR_15523_59"
},
"Project Status": {
"value": "RFC",
"id": "STR_15523_54",
"dropdown": [
{
"value": "IW",
"label": "In Work"
},
{
"value": "RFC",
"label": "Ready for Creation"
},
{
"value": "CR",
"label": "Created"
},
{
"value": "FC",
"label": "Failed"
}
]
},
"Project Type (paas, miner)": {
"value": "paas",
"id": "STR_15523_37",
"dropdown": [
{
"value": "paas",
"label": "PaaS Project"
},
{
"value": "miner",
"label": "Miner Project"
}
]
},
"WORK data in GB": {
"value": "100",
"id": "NUM_15523_55"
}
}
Now I have to create input fields and dropdown menus(if there is a dropdown menu) with json data
You really should not be hand-constructing HTML like that. It's best if you use a template and let the template engine handle the heavy lifting.
I also noticed that you're using object as the ng-model. Instead you should have a separate variable which will hold the selected value.
Here's a better way of doing this--in an .html file:
<div ng-repeat="object in listOfObjects"
<label style="float: left">{{ $index }}</label>
<select ng-model="selectedValues[$index]" class="form-control sel"
style="width:300px; float:right; margin-right:75px;"
ng-options="obj.value for obj in object"></select>
</div>
Then in whatever controller you have set up in JavaScript:
// this will be the list of selected values
$scope.selectedValues = new Array(list.length);
// this would be the array that each `object` is part of
$scope.listOfObjects = list;
This isn't the most elegant solution, but basically what I've done is construct an array that is the same length as the list of objects. Angular templates have a special variable $index when you're in an ng-repeat which tracks the current index of the array you're looping through.
So when a user changes the selected value of the 3rd select box (index 2), $scope.selectedValues[2] would be set to the selected option.
EDIT: on transforming the JSON to an array:
var list = Object.keys(json).map(function(jsonKey) {
return {
name: jsonKey,
label: json[jsonKey].label,
value: json[jsonKey].value
};
});`
So.. there are a number of reasons why that won't work. The provided code wouldn't even work because of the template brackets that you are trying to append to your html string...
$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');
Is there a reason that you are trying build your markup in js?
It's also advised not to use jquery inside angular controllers. If you have jquery loaded the jQuery object is available through angular.element, otherwise angular uses jQuery light.
Rather than enumerate on the other issues here, I put together this basic example of how a select works in Angular
https://codepen.io/parallaxisjones/pen/BRKebV
Also, you should consult the angular documentation before posting questions to stack overflow. The docs provide a pretty clear example of how to use ng-repeat in a select. https://docs.angularjs.org/api/ng/directive/select
EDIT: I updated my codepen with an example of fetching JSON data with an HTTP GET request
EDIT: updated codepen with provided data example, iterating over object with (key, value) in json syntax in ng-repeat
My question is looking similar to other questions. But it is different.
Please take a look of below code.
I want to filter data by an array of objects.
Here is the snippet
HTML
<div
ng-repeat="(key, value) in ledgerData.ledgers track by $index"
ledger-pop
index="$index"
ftype="ftypeUpdate"
itemdata="value"
acntlist="fltAccntList"
class='drEntryForm_{{$index}} pr'
name='drEntryForm_{{$index}}'
update-ledger="updateEntry(entry)"
novalidate
>
</div>
JS
$scope.ledgerDataata = {
"ForwardedBalance": {
"amount": 0,
"type": "CREDIT"
},
"creditTotal": 4008,
"debitTotal": 4008,
"balance": {
"amount": 4008,
"type": "CREDIT"
},
"ledgers": [
{
"transactions": [
{
"particular": {
"name": "Sarfaraz",
"uniqueName": "temp"
},
"amount": 1001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing"
},
{
"transactions": [
{
"particular": {
"name": "frnd",
"uniqueName": "frndafafaf14453422453110l26ow"
},
"amount": 2001,
"type": "CREDIT"
},
{
"particular": {
"name": "Rahul",
"uniqueName": "cake"
},
"amount": 3001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing",
}
]
}
I am trying to filter by
ng-repeat="(key, value) in ledgerData.ledgers track by $index | filter:{transactions[0]:{type: 'DEBIT'}}"
But am getting error
thanks in advance :-)
You need to write nested ng-repeat to solve this problem.
outer ng-repeat for the array ledgerData.ledgers and
inner ng-repeat for transaction array in ledgerData.ledgers
<div ng-repeat="(keyOne, ledger) in ledgerData.ledgers track by $index">
{{ledger.description}}
<div ng-repeat="(keyTwo, transaction) in ledger.transactions | filter:{type:'DEBIT'}">
{{transaction.type}}
</div>
</div>
Actually I got the solution.
I've googled hardly and got a library for angularjs-filter.
Here is the link it is very good plugin for filter dirty works and how to use it.
How I got success:
html
ng-repeat="(key, value) in ledgerData.ledgers | pick: debitOnly track by $index"
AngularJS
$scope.debitOnly = (ledger) ->
'DEBIT' == ledger.transactions[0].type
that's it.
I am trying to search through a json object to select some values. For example I have a variable with the value 'product-2' and I want to look through the json object and return the attributes array of 'product-2'
{
"attributes": [
...
],
"portfolio": [
{
"conn": [
{
"product": "product-1",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
},
{
"product": "product-2",
"description": "Description in here"
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
]
}
]
Could anyone tell me how I can achieve this? Thank you
EDIT:
As per Pramods request - I was working with the following js (although its really wrong I am sure)
$scope.productAttributes = [];
$scope.getProductDetails = function (product_id) {
console.log(product_id);
//search trough json
angular.forEach($scope.listOfProducts.product_id, function(value, key) {
// I was thinking I could loop through the json and when I find the matching product, then push its attributes into an array?
// if (key === enteredValue) {
// $scope.productAttributes.push({atribute: key});
// }
});
};
EDIT No.2
The JSON structure has changed
Use a filter to destructure the array.
In my example I use a filter within a Controller. This should probably be done in a service or a view. For brevity I used the filter in a controller.
The filter expression essentially says, return the first object in the array with a property 'product' that is 'product-2'
var app = angular.module('app', []).controller('MyController', MyController);
MyController.$inject = ['$filter'];
function MyController($filter) {
var data = [
{
"product": "product-1",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
},
{
"product": "product-2",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
]
this.product = $filter('filter')(data, {product: "product-2"})[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MyController as vm">
Product-2: {{vm.product}}
</div>
</div>
Well, if you don't know how product-2 will be nested and you actually need to search for it, then you need to do a recursive search. A recursive function is a function that calls itself.
This means that you iterate over each of the keys, and if the key is an object, call the recursive function on that key as well, until the key you want is found.
Here is a similar question, with a few algorithms provided for doing recursive search on a JSON structure in JavaScript: traversing through JSON string to inner levels using recursive function
I think your JSON is wrong , So please correct it
Correct JSON
{
"attributes": [],
"portfolio": [
{
"conn": [
{
"product-1": {
"label": "product-1",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
},
{
"product-2": {
"label": "product-2",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
}
]
}
]
}
And to parse above json and return product information following is the code
$(document).ready(function() {
$.each(dict['portfolio'][0], function(key, list){
$.each(list, function(index, value){
$.each(value, function(product, info){
if (product == "product-2"){
answer = {}
answer[product] = info;
return JSON.stringify(answer);
}
});
});
});
});
Fiddle link :-
http://fiddle.jshell.net/2t8uknkc/
I have a JSON data in the format
[
{
"_1": {
"id": 4,
"cost": 45.0,
"measure": 4,
"NoOfUnits": 677,
"hours": null
},
"_2": {
"id": 1,
"name": "Truck",
"description": "Test"
}
},
{
"_1": {
"id": 1,
"cost": 1120.0,
"measure": 1,
"NoOfUnits": 500,
"hours": null
},
"_2": {
"id": 7,
"name": "PC300",
"description": null
}
},
]
I'm not able to display the data that I have store in a $scope variable say
$scope.result
This is my ng repeat functionality
<div ng-repeat="data in result">{{data.name}}{{data.description}}</div>
your $scope.result is contains 2 objects, with in one object u have set of object properties like _1,_2 , and then these properties are again objects like
"_1": {
"id": 4,
"cost": 45.0,
"measure": 4,
"NoOfUnits": 677,
"hours": null
}
, then u have the properties u need to print.
<ul>
<li ng-repeat="x in result"> // repeats objects
<ul ng-repeat="obj in x"> // repeat object properties '_1',"_2" , these are again objects
{{obj.name}}{{obj.description}}
<ul>
</li>
</ul>
With your data structure... You cannot access name and description directly from first ng-repeat.
Even if you have nested ng-repeat you are not guaranteed with name and description. You need to flatten the object after first ng-repeat and then you can access all the properties. Assuming that _1, _2 object properties are related.
Two loops are required---
<div ng-repeat="data in result">
<div ng-repeat="obj in data">
{{obj.cost}}{{obj.name}}
</div>
</div>
Demo: http://jsfiddle.net/HB7LU/8254/
I am new to Angular and would like to apply filter to this JSON to only get "place" objects.
{
"places": {
"live": "true",
"status": "default",
"place": [
{
"-name": "Test",
"-url": "http://myurl"
},
{
"-name": "Test",
"-url": "http://myurl"
},
{
"-name": "Test",
"-url": "http://myurl"
}
]
}
}
I was thinking of applying filter with something like this:
<div ng-repeat="place in places | filter:{place:'http'}">
This is clearly wrong . Is there a way to apply filter to only get "place" objects
<div ng-repeat="place in places.place">
should work I think