Displaying JSON with ng repeat - javascript

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/

Related

Display object inside object in angular

Here's my object inside EntryList variable in my component
{
"id": 0,
"startAddress": {
"id": 6,
"addressString": "addressString"
},
"endAddress": {
"id": 6,
"addressString": "addressString"
},
"distanceInKm": 5.637376656633329,
"travelTime": "travelTime",
"standingTime": "standingTime",
"vehicle": {
"id": 2,
"licensePlateNumber": "licensePlateNumber"
},
"driver": {
"id": 7,
"name": "name"
}
}
I want to display columns: driverName, vehicleName, startAdrress, endAdress, distanceInKm, travelTime, standingTime.
I tried using <tr *ngFor="let DLBlist of EntryList"> but there's no display.
Those are nested elements. You can access them with the following code
DLBlist?.driver?.name
DLBlist?.startAddress?.addressString
DLBlist?.endAddress?.addressString
?. is the safe access operator, so if they don't exist no error is thrown

How to show a specific object in object array (Angular 5, TypeScript)

I have a data provider in Angular 5.
export class DataProvider {
location: any;
private locations: any[] = [
{
"name": "restaurant",
"location": "downtown",
"category": "restaurant",
"id": "1"
},
{
"name": "law firm",
"location": "center city",
"category": "office",
"id": "2"
},
{
"name": "public library",
"location": "suburb",
"category": "library",
"id": "3"
} ]
and here's my HTML file.
<div *ngFor="let location of locations">
<h1></h1>
<h2></h2>
</div>
In this scenario, how can I load a specific object (item) in data array with certain attributes?
For instance, If I want to load an object with "category" :"restaurant", what should I do on my HTML file? so the two others should not show up. I just want to load one out of three by using this specific attribute.
Thanks.
You need to access the attribute. You can use the following example
<div *ngFor="let location of locations">
<h1>{{location.name}}</h1>
<h2>{{location.category}}</h2>
</div>
EDIT
To filter depending on a category:
locationsFiltered = this.locations.filter(location =>location.category=="restaurant");
Now to make this example practical I will create a method to do it
filter(category : string) : any[] {
return this.locations.filter(location =>location.category==category);
}
then in html
<div *ngFor="let location of locationsFiltered">
<h1>{{location.name}}</h1>
<h2>{{location.category}}</h2>
</div>

angularjs - ng repeat with json

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.

AngularJS deep filter through array 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.

ng-repeat not pushing data

I'm using ng-repeat directive to list a set of JSON data of the format
$scope.result=[
{
"id": 84,
"resource": {
"id": 3,
"name": "Resource Planning",
"description": "test"
},
"activity": {
"id": 6,
"name": "Activity Planning",
"description": "test"
}
}
]
My usage of ng-repeat is like this..
<div ng-repet="data in result">{{data.resource.name}} {{data.activity.name}}</div>
I'm able to display the name ie., "Resouce Planning" and "Activity Planning".
But I can't push the data if I'm doing like this
$scope.result.push({resource.name:result.resource.name,activity.name:result.activity.name})
from the controller.
Is there any way to push the name which is inside the object. And to display/list the same using ng-repeat?
Thanks
I don't really understand the question, but that's not how you build your javascript object. It should be something like:
$scope.result.push({
resource: {
name: result.resource.name
},
activity: {
name: result.activity.name
}
})

Categories