how can i use ng-repeat for below json
$scope.prlists = {
"1": [{
"id": "1",
"name": "One",
"qty": 2,
"amount": "1.00",
"cat": "1.00"
}],
"3": [{
"id": "3",
"name": "backit",
"qty": 3,
"amount": "2.00",
"cat": "2.00"
}]
}
<div ng-repeat="pro in prlists">
name : pro.name
</div>
can not able to get the name due to inner array. How to solve
ngRepeat can iterate over object properties. So, you can do something like
<div ng-repeat="(key, pro) in prlists">
name: {{pro[0].name}}
</div>
See the documentation at: https://docs.angularjs.org/api/ng/directive/ngRepeat
Note that this will not guarantee the order in Angular version >= 1.4, since it will depend on the browser's ordering. You might be able to sort it using the orderBy filter
<div ng-repeat="(key, pro) in prlists | orderBy:key">
name: {{pro[0].name}}
</div>
See: https://docs.angularjs.org/api/ng/filter/orderBy
If the inner arrays are not just a single element, you may have to nest a second ngRepeat inside the first div.
As I have already commented:
try pro[0].name
Reason:
In you code, for every iteration, $data(pro) will have
[{
"id": "1",
"name": "One",
"qty": 2,
"amount": "1.00",
"cat": "1.00"
}]
Now as you see, this is not an object, so you have to go to its first and only child. Also you are missing {{}}. name : pro.name this will print pro.name as text and not parse it.
Working demo.
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
I have array of object tree
var tree = [{
"id": "1",
"name": "one",
"child": [],
}, {
"id": "2",
"name": "two",
"child": [{
"id": "21",
"name": "twentyOne",
"child": [],
},{
"id": "22",
"name": "twentyTwo",
"child": [],
}],
}, {{
"id": "3",
"name": "three",
"child": [],
},
}].
Which one is the best way to store array of objects in localStorage?
Is it better to use another format?
There are several methods:
getItem
getAllItem
removeItem
saveItem
But there are child arrays of objects. It means that I will use recursive search to find necessary object.
Save the data in LocalStorage as an array, or array of simple objects, but try to keep it DRY (don't repeat yourself). For example, if you have a list of people, keep an array of the people, but don't keep a separate variable for the count.
What you want is basically a "state". As long as you keep it minimal you will be fine. Then you can use lodash or underscore to find, merge, add, remove elements from that array.
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 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/
We have a UI where user makes selection & click on process button. On click on button, system calls a method written in JavaScript and it returns a object which looks like this.
{
"users": [{
"id": 1,
"name": "Ed",
"orders": [{
"id": 10,
"total": 10.76,
"status": "invoiced"
},{
"id": 11,
"total": 13.45,
"status": "shipped"
}]
}]
}
What I want:
I want to pass this JavaScript object to a method which should generate a text producing output like this:
{
"users": [{
"id": 1,
"name": "Ed",
"orders": [{
"id": 10,
"total": 10.76,
"status": "invoiced"
},{
"id": 11,
"total": 13.45,
"status": "shipped"
}]
}]
}
I should be able to pass a real JavaScript object to this method and by going over the object it should produce a text showcasing the structure of this object.
In .net world we can do this by using reflection and then return the string. We also have option of serializing the object into XML or JSON or any other format.
Is it possible with JavaScript.
Why I want to do this.
I have written 50 test cases which expects this object as input. I can take output of the method and pass it to any testcase.
Thank you
You should add your stringified object to some <pre> and <code> tags to get the best output.
<div><pre><code class="text"></code></pre></div>
And then use the JSON.stringify spaces parameter:
$('.text').html(JSON.stringify(obj, null, 2));
You can also use tabs if you want.
$('.text').html(JSON.stringify(obj, null, '\t'));
Fiddle
Use JSON.stringify() method. It does exactly what you need.