to make able list item show their details on click - angularjs

I am trying to get the latitude and longitude of the cities according to id...for example if i will click on kanpur it will show its latitude which is returning from API.But what i did is returning latitude of only last city which is returning from API.
my app.js code is:
.controller('AppCtrl', function($scope,
$http,$ionicModal,$cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$scope.currentItem = 1;
$scope.latitude;
$scope.longitude;
$scope.ers = {
'agency_device_id' : ''
};
$scope.submit = function(){
var link = 'http://trendytoday.in/ers/api/DeviceAlarms';
$http.post(link, {ers: $scope.ers},{headers: {'Content-Type': 'application/json'} }).then(function (res){
// $scope.mssg = res.data.ers.resMessage;
// $scope.resp = res.data.ers.response;
$scope.arr = [];
angular.forEach(res.data.ers.data.alarms, function(value) {
$scope.arr.push(value);
//console.log(value.city)
latitude=value.lattitude;
longitude=value.longitude;
})
});
}
$scope.getdetails = function(){
window.alert(latitude);
};
});
and API response is:
{
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [
{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
},
{
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}
]
}
}
}

Assuming your $scope.currentItem is the id of the selected city such as kanpur, then when the API returns the data, check for this value to match the id and set the $scope variables.
I hope you get the idea.
function MyCtrl($scope) {
$scope.currentItem = 1;
$scope.latitude;
$scope.longitude;
$scope.submit = function() {
$scope.res = {
data: {
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
},
{
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}
]
}
}
}
}
$scope.arr = [];
angular.forEach($scope.res.data.ers.data.alarms, function(value) {
$scope.arr.push(value);
if ($scope.currentItem == value.id) {
$scope.latitude = value.lattitude;
$scope.longitude = value.longitude;
}
});
}
$scope.submit();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app ng-controller="MyCtrl">
Long: {{longitude}}
Lati: {{latitude}}
</body>

the only thing i changed is i passed obj as a parameter to getdetails function.
$scope.getdetails = function(obj){
alert(obj.lattitude);
}
and in html:
<div ng-repeat="obj in arr " ng-click="getdetails(obj)">
<p><b>{{obj.city}}</b></p>
</div>

Related

json array character value ascending and descending order typescript

I have an array like the following:
var homes = [
{
"h_id": "3","city": "Dallas","state": "YYYY","zip": "75201","price": "162500"
},
{
"h_id": "4","city": "CA","state": "ZZZZ","zip": "90210","price": "319250"
},
{
"h_id": "5","city": "New York","state": "AAAA","zip": "00010","price": "962500"
},
{
"h_id": "5","city": "New York","state": "CCCC","zip": "00010","price": "962500"
}
];
I need to sort it so i can be able to check state in both ascending and descending order,
The result needed as following:
var homes = [
{
"h_id": "5", "city": "New York", "state": "AAAA", "zip": "00010", "price": "962500"
},
{
"h_id": "5", "city": "New York", "state": "CCCC", "zip": "00010", "price": "962500"
},
{
"h_id": "3", "city": "Dallas", "state": "YYYY", "zip": "75201", "price": "162500"
},
{
"h_id": "4", "city": "CA", "state": "ZZZZ", "zip": "90210", "price": "319250"
},
];
homes = homes .sort(function (a, b) {
return a.name.localeCompare(b.state);
});
You can use city,h_id etc in place of state

show data from nested JSON array

how to show "city" from this JSON file through angularJS http:
{"ers":{"resMessage":"1","response":"Success","data":{"alarms":[{"id":"1","alarm_id":"2","title":"Fire","description":"fire","type":"Fire","priority":"High","address":"Kanpur, Uttar Pradesh, India","city":"Kanpur","state":"UP","country":"India","zipcode":"123456","lattitude":"26.449923","longitude":"80.3318736"},{"id":"3","alarm_id":"4","title":"test-02","description":"test-02","type":"Medical","priority":"High","address":"Borivali West, Mumbai, Maharashtra, India","city":"Mumbai","state":"MH","country":"India","zipcode":"123456","lattitude":"19.2461644","longitude":"72.85090560000003"}]}}}
Step 1:
Call url and get json data in $scope.data variable and use ng repeat in your template
Step 2:
Use angular for each for get city in controller
Refer following example
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.data = {
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
}, {
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}]
}
}
};
angular.forEach($scope.data.ers.data.alarms, function(value) {
console.log(value.city)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="obj in data.ers.data.alarms">
City:- {{obj.city}}<br>
Address:- {{obj.address}}
</div>
</div>
Hope this will help you
You can use ng-repeat over myData.ers.data.alarms
DEMO
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.myData = {"ers":{"resMessage":"1","response":"Success","data":{"alarms":[{"id":"1","alarm_id":"2","title":"Fire","description":"fire","type":"Fire","priority":"High","address":"Kanpur, Uttar Pradesh, India","city":"Kanpur","state":"UP","country":"India","zipcode":"123456","lattitude":"26.449923","longitude":"80.3318736"},{"id":"3","alarm_id":"4","title":"test-02","description":"test-02","type":"Medical","priority":"High","address":"Borivali West, Mumbai, Maharashtra, India","city":"Mumbai","state":"MH","country":"India","zipcode":"123456","lattitude":"19.2461644","longitude":"72.85090560000003"}]}}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="data in myData.ers.data.alarms">
<h1> {{data.city}}</h1>
</div>
</div>

AngularJS multiple Scope needed for Autocomplete

I have an array structure like this.
[
{
"id": "1",
"name": "John",
"city": "NY"
},
{
"id": "2",
"name": "Gerold",
"city": "LA"
},
{
"id": "3",
"name": "Stuart",
"city": "Boston"
}
]
I need $scope like below for my autocomplete search.
$scope.name=["john","Gerold","Stuart"];
$scope.city=["NY","LA","Boston"];
can anyone help to get this using angularjs controller.
Thanks in Advance.!
Use MAP
$scope.users = [
{
"id": "1",
"name": "John",
"city": "NY"
},
{
"id": "2",
"name": "Gerold",
"city": "LA"
},
{
"id": "3",
"name": "Stuart",
"city": "Boston"
}
];
$scope.cities = $scope.users.map(function(obj){
return obj.city;
});
console.log($scope.cities);
You can also create a helper function that would do that for you and you don't have to define a map per function that you want, and you do it in just one run (hence just a bit faster)
Sample here ;)
var myArray = [
{
"id": "1",
"name": "John",
"city": "NY"
},
{
"id": "2",
"name": "Gerold",
"city": "LA"
},
{
"id": "3",
"name": "Stuart",
"city": "Boston"
}
]
function toScope(scopedPropertieNames, array) {
scopedPropertieNames.forEach(function(propertyName) {
if (! $scope[propertyName]) {
$scope[propertyName] = []
}
});
array.forEach(function (objecInArray) {
scopedPropertieNames.forEach(function(propertyName) {
$scope[propertyName].push(objecInArray[propertyName])
})
});
}
toScope(['name', 'city'], myArray);
console.log($scope) //{name: Array[3], city: Array[3]}
You can use MAP..
$scope.YourBigArray = [{
"id": "1",
"name": "John",
"city": "NY"
}, {
"id": "2",
"name": "Gerold",
"city": "LA"
}, {
"id": "3",
"name": "Stuart",
"city": "Boston"
}];
$scope.names = $scope.YourBigArray.map(function(object) {
return object.name;
});
$scope.cities = $scope.YourBigArray.map(function(object) {
return object.city;
});
You can do a filter to use unique things in array of names and cities..
function filterForDuplicate(things) {
return things.filter(function(item, pos) {
return things.indexOf(item) === pos;
});
}

How to access a single object from a JSON array

Okay so I have a JSON:
{
"Concepts": [
{
"Concept": "1",
"Description": "siopao"
},
{
"Concept": "4",
"Description": "gulaman"
},
{
"Concept": "9",
"Description": "sisig"
},
{
"Concept": "12",
"Description": "noodle"
},
{
"Concept": "15",
"Description": "sisigan"
},
{
"Concept": "16",
"Description": "buko shake"
},
{
"Concept": "17",
"Description": "mango shake"
},
{
"Concept": "19",
"Description": "burger"
},
{
"Concept": "20",
"Description": "sample"
},
{
"Concept": "21",
"Description": "shit"
}
]
}
How do I get only "Description":"siopao"? I'm using AngularJS.
If you want to map the jsonstring to something like:
["siopao", "gulaman", "sisig", "noodle", "sisigan", "buko shake", "mango shake", "burger", "sample", "shit"]
use
var object = JSON.parse(jsonString);
var descriptions = object.Concepts.map(function(c) {
return o.Description;
});
If you only want the one with the description "siopao", add a filter before the map:
var object = JSON.parse(jsonString);
var description = object.Concepts.filter(function(a) {
return a.Description === "siopao";
}).map(function(c) {
return o.Description;
})[0];

Get Value After Payment

I have the following object. How do I get the email value from it?
{
"payment_method": "paypal",
"payer_info": {
"email": "example#domain.com",
"first_name": "example",
"last_name": "xxx",
"payer_id": "12313213",
"shipping_address": {
"recipient_name": "Example",
"id": "5435345",
"line1": "1 SS ",
"city": "San Jose",
"state": "CA",
"postal_code": "95131",
"country_code": "US"
},
"phone": "4547567",
"country_code": "US"
}
}

Resources