How to write json in Angular getting different values - arrays

I know how to print this in Angular from a local jsonFile:
[{
"Firstname": "Steve",
"Lastname": "Jansson"
},
{
"Firstname": "Kurt",
"Lastname": "Nilsson"
},
{
"Firstname": "Lisa",
"Lastname": "Andersson"
}]
This is is how it looks when im printing it out
<p> List!</p>
<ul>
<li *ngFor="let adress of arrAdressbook; let i = index">{{adress.Firstname}} {{adress.Lastname}} </li>
</ul>
But how do I do if I want to print the following?
{
"Adressbook": [{
"Firstname": "Steve",
"Lastname": "Jansson",
"Adress": [{
"Street": "Hollowroad 17",
"City": "Sidney"
}]
},
{
"Firstname": "Kurt",
"Lastname": "Nilsson",
"Adress": [{
"Street": "Asbroad 14",
"City": "Canberra"
}]
},
{
"Firstname": "Lisa",
"Lastname": "Andersson",
"Adress": [{
"Street": "kangahoop 14",
"City": "Bunberry"
}]
}
]
}
Any help would be much appreciated!
Cheers! //Mcgajver

Much easier than you think. Use angular json pipe https://angular.io/api/common/JsonPipe
<pre>{{ data | json }}</pre>

Related

extract specific values from firebase database

Given this database from firebase can someone tell me how to obtain the average score from the 2 data?
i have tried the following code but with no success. I believe the issue is on how to exactly extract the score value from the data.
CODE I HAVE TRIED
<h3>Average total: {Object.values(learnerObjects).reduce((a,b) => a + b, 0)/(learnerObjects.length || 1)}</h3>
DATABASE
learners
-MZKJfb-sDiNkSxFcqu4
email:
"pepe365#yahoo.com"
firstName:
"Gian"
lastName:
"Peppin"
score:
"10"
-MZN_V_YFt2naSReI4FA
email:
"may56#gmail.com"
firstName:
"feona"
lastName:
"may"
score:
"8"
{
"-MZKJfb-sDiNkSxFcqu4": {
"email": "pepe365#yahoo.com",
"firstName": "Gian",
"lastName": "Peppin",
"score": "10"
},
"-MZN_V_YFt2naSReI4FA": {
"email": "may56#gmail.com",
"firstName": "feona",
"lastName": "may",
"score": "8"
},
"-MZOBLhg1liCtmsG1M10": {
"email": "ciccio90#yahoo.com",
"firstName": "teo",
"lastName": "mammuccari",
"score": "7"
},
"-MZOBWPymXWdqjknKpfu": {
"email": "greenarr56#gmail.com",
"firstName": "mirko",
"lastName": "de luca",
"score": "5"
},
"-MZR2K_Cwkcqbz-UFlsN": {
"email": "fester80#yahoo.com",
"firstName": "Salvatore",
"lastName": "De Gennaro",
"score": "7"
},
"-MZR7AQggg222CYFFII_": {
"email": "pepti89#aol.com",
"firstName": "Nikhil",
"lastName": "Piparia",
"score": "6"
}
}

How to fetch array of array data in angular 2?

How to fetch array of array data in angular 2.
My json data is as follows,
[[{
"pk_emp_id":5,
"tenant_id":"Zone1",
"location_id":1,
"emp_number":"sk44",
"prefix":"",
"first_name":"qqqqq",
"middle_name":"www",
"last_name":"eeee",
"display_name":"qqqq",
"full_name":"qqq qqqq",
"email":"qqqq#gmail.com",
"gender":"Female",
"emp_type_id":2,
"date_of_hire":191000,
"date_of_birth":null,
"manager_id":7,
"phone_number":"9877654",
"position":"SE",
"responsibility":"",
"notes":"",
"contracted":"0",
"street":"vidyanagar",
"state":"Karnataka",
"city":"hubli",
"zip_code":"9898",
"dob":-19800000,
"ssn":"",
"deleted":0
},{
"pk_empt_id":2,
"empt_tenant_id":"2",
"***empt_name***":"temporary",
"deleted":0
}]]
How can I fetch empt_name in datatable(row data)?
let dummyArr = [
[{
"pk_emp_id": 5,
"tenant_id": "Zone1",
"location_id": 1,
"emp_number": "sk44",
"prefix": "",
"first_name": "qqqqq",
"middle_name": "www",
"last_name": "eeee",
"display_name": "qqqq",
"full_name": "qqq qqqq",
"email": "qqqq#gmail.com",
"gender": "Female",
"emp_type_id": 2,
"date_of_hire": 191000,
"date_of_birth": null,
"manager_id": 7,
"phone_number": "9877654",
"position": "SE",
"responsibility": "",
"notes": "",
"contracted": "0",
"street": "vidyanagar",
"state": "Karnataka",
"city": "hubli",
"zip_code": "9898",
"dob": -19800000,
"ssn": "",
"deleted": 0
}, {
"pk_empt_id": 2,
"empt_tenant_id": "2",
"***empt_name***": "temporary",
"deleted": 0
}]
];
dummyArr.forEach(element =>{
element.forEach(element2=>{
console.log(element2)
})
});
I believe you have exposed a GET method in your web api
In Angular using HTTP service
this.http.get("").subscribe(result => {
conosle.log(result[1].empt_name) });
You can take it in an array and read it like this:
x = [
[{
"pk_emp_id": 5,
"tenant_id": "Zone1",
"location_id": 1,
"emp_number": "sk44",
"prefix": "",
"first_name": "qqqqq",
"middle_name": "www",
"last_name": "eeee",
"display_name": "qqqq",
"full_name": "qqq qqqq",
"email": "qqqq#gmail.com",
"gender": "Female",
"emp_type_id": 2,
"date_of_hire": 191000,
"date_of_birth": null,
"manager_id": 7,
"phone_number": "9877654",
"position": "SE",
"responsibility": "",
"notes": "",
"contracted": "0",
"street": "vidyanagar",
"state": "Karnataka",
"city": "hubli",
"zip_code": "9898",
"dob": -19800000,
"ssn": "",
"deleted": 0
}, {
"pk_empt_id": 2,
"empt_tenant_id": "2",
"***empt_name***": "temporary",
"deleted": 0
}]
]
$('#a').text(x[0][1]['***empt_name***'])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<span id='a'>sadsad </span>
This is just Javascript object manipulation.
You can do something like :
outerArray.forEach(innerArray =>{
if(innerArray.length){
innerArray.forEach(element =>{
//do somthing here with element.empt_name
console.log(element.empt_name);
});
}
})

json data in loop of angular view

How to call this json data in loop of angular view(ng-repeat)...
Here is my json
{
"customers": [
{
"id": 1,
"firstName": "LoadTestName1",
"lastName": "LoadTestLN1",
"emailAddress": "loadtest1#gmail.com"
},
{
"id": 2,
"firstName": "LoadTestName2",
"lastName": "LoadTestLN2",
"emailAddress": "loadt"
}
]
}
in the controller: $scope.var1 = yourJson;
in the view:
<div ng-repeat="item in var1.customers">
{{item.firstName}} ...
</div>
Strip the outer braces:
$scope.customers = [ { "id": 1, "firstName": "LoadTestName1", "lastName": "LoadTestLN1", "emailAddress": "loadtest1#gmail.com" }, { "id": 2, "firstName": "LoadTestName2", "lastName": "LoadTestLN2", "emailAddress": "loadt" } ];
ng-repeat="customer in customers">
<div>{{customer.firstName}}</div>
</div>

Searching tag in object Angularjs

I have an tag array list which user enters
$scope.tags = ["INDIA","USA","JAPAN","CHINA"];
$scope.object = [ {
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "USA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "AUSTRALIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "SOUTHAFRICA"
} ]
I need to search $scope.tags i.e INDIA,USA,CHINA,JAPAN in $scope.object and return new array.
So new array object will be like
$scope.new = [ {
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "USA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
}]
you can try something like this
$scope.newArr = [];
angular.forEach($scope.object , function(val,key) {
var exists = ($scope.tags).indexOf(val.place);
if(exists >= 0) {
$scope.newArr.push(val);
}
});
here is the working plunker
Try this, I didn't test.
$scope.newObj;
for (var i = 0; i < $scope.tags.length; i++) {
for (var j = 0; j < $scope.object.length; j++) {
if ($scope.tags[i].toLowerCase() == $scope.object[j].place.toLowerCase()) {
$scope.newObj.push($scope.object[j]);
}
}
}

How to read/repeat JSON data from AngularJS

I am pretty new to AngularJS so my apologies in that there are probably several concepts I am missing.
I'd like to take the following multi-level JSON string and parse/repeat the LastName elements.
Here is my attempt to do so with HTML / Javascript.
HTML
<!doctype html>
<html ng-app="nameApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="jsonGrab">
<hr>
<h1># of Records {{output}}</h1>
<ul>
<li data-ng-repeat="attribute in output.attributess"> {{attributes.LastName}}</li>
</ul>
</div>
</body>
</html>
Javascript
var nameApp = angular.module('nameApp',[]);
nameApp.controller('jsonGrab', function ($scope) {
// Comment
$scope.output = '[{
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXuAAP"
},
"Email": "rose#edge.com",
"FirstName": "Rose",
"Id": "003o000000BTRXuAAP",
"LastName": "Gonzalez"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXvAAP"
},
"Email": "sean#edge.com",
"FirstName": "Sean",
"Id": "003o000000BTRXvAAP",
"LastName": "Forbes"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXwAAP"
},
"Email": "jrogers#burlington.com",
"FirstName": "Jack",
"Id": "003o000000BTRXwAAP",
"LastName": "Rogers"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXxAAP"
},
"Email": "pat#pyramid.net",
"FirstName": "Pat",
"Id": "003o000000BTRXxAAP",
"LastName": "Stumuller"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXyAAP"
},
"Email": "a_young#dickenson.com",
"FirstName": "Andy",
"Id": "003o000000BTRXyAAP",
"LastName": "Young"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXzAAP"
},
"Email": "barr_tim#grandhotels.com",
"FirstName": "Tim",
"Id": "003o000000BTRXzAAP",
"LastName": "Barr"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY0AAP"
},
"Email": "bond_john#grandhotels.com",
"FirstName": "John",
"Id": "003o000000BTRY0AAP",
"LastName": "Bond"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY1AAP"
},
"Email": "spavlova#uog.com",
"FirstName": "Stella",
"Id": "003o000000BTRY1AAP",
"LastName": "Pavlova"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY2AAP"
},
"Email": "lboyle#uog.com",
"FirstName": "Lauren",
"Id": "003o000000BTRY2AAP",
"LastName": "Boyle"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY3AAP"
},
"Email": "b.levy#expressl&t.net",
"FirstName": "Babara",
"Id": "003o000000BTRY3AAP",
"LastName": "Levy"
}]';
Result: # of Records 1937
Shows the number of characters (I think) instead of the number of records returned and the unordered list is not displaying.
Look at the code:
$scope.output = '[{ ... }]';
So, output is a variable of type string. It's not an array. If you want an array, it should be
$scope.output = [{ ... }];
But then, the code would still be wrong:
<li data-ng-repeat="attribute in output.attributess">
{{attributes.LastName}}
</li>
output is an array. It doesn't have any attributess field. So it should be
<li data-ng-repeat="element in output">
{{ element.attributes.LastName }}
</li>

Resources