Related
I need some help getting some details of this array and save it into a variable. I'd like to be able to have the latitude and longitude saved as individual variables. I'm really terrible at selecting pieces of an array.
autofillCollection.addEventListener('retrieve', (event) => {
const featureCollection = event.detail;
const inputEl = event.target;
console.log(featureCollection);
and getting this as a Response, but I'd like to store the latitude and logintude coordinates as variables. I'm terrible at mapping arrays. Can anyone help me select the coordinates indivudally?
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"accuracy": "rooftop",
"match_code": {
"exact_match": false,
"house_number": "UNMATCHED",
"street": "UNMATCHED",
"postcode": "UNMATCHED",
"place": "UNMATCHED",
"region": "UNMATCHED",
"locality": "NOT_APPLICABLE",
"country": "INFERRED",
"confidence": "low"
},
"place_type": [
"address"
],
"place_name": "3329 Old Georgetowne Road, Edmond, Oklahoma 73013, United States",
"address_number": "3329",
"street": "Old Georgetowne Road",
"context": [
{
"id": "postcode.250457836",
"text_en": "73013",
"text": "73013"
},
{
"id": "place.97216748",
"wikidata": "Q862645",
"text_en": "Edmond",
"language_en": "en",
"text": "Edmond",
"language": "en"
},
{
"id": "district.17426156",
"wikidata": "Q485038",
"text_en": "Oklahoma County",
"language_en": "en",
"text": "Oklahoma County",
"language": "en"
},
{
"id": "region.304364",
"short_code": "US-OK",
"wikidata": "Q1649",
"text_en": "Oklahoma",
"language_en": "en",
"text": "Oklahoma",
"language": "en"
},
{
"id": "country.8940",
"short_code": "us",
"wikidata": "Q30",
"text_en": "United States",
"language_en": "en",
"text": "United States",
"language": "en"
}
],
"id": "address.3132590889692730",
"external_ids": {
"carmen": "address.3132590889692730",
"federated": "carmen.address.3132590889692730"
},
"feature_name": "3329 Old Georgetowne Road",
"matching_name": "3329 Old Georgetowne Road",
"description": "Edmond, Oklahoma 73013, United States",
"metadata": {
"iso_3166_2": "US-OK",
"iso_3166_1": "us"
},
"language": "en",
"maki": "marker",
"postcode": "73013",
"place": "Edmond",
"district": "Oklahoma County",
"region": "Oklahoma",
"region_code": "OK",
"country": "United States",
"country_code": "us",
"full_address": "3329 Old Georgetowne Road, Edmond, Oklahoma 73013, United States",
"address_line1": "3329 Old Georgetowne Road",
"address_line2": "",
"address_line3": "",
"address_level1": "OK",
"address_level2": "Edmond",
"address_level3": "",
"postcode_plus": "0802",
"is_deliverable": true,
"missing_unit": false
},
"text_en": "Old Georgetowne Road",
"geometry": {
"type": "Point",
"coordinates": [
-97.46885,
35.62264
]
}
}
],
"attribution": "NOTICE: © 2022 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
}
You can use Array.map on the main object property features on each feature's geometry object's coordinates property, then flatten the arrays into one with the individual coordinates using Array.flat, each array element will be an individual coordinate, so you can use them as a single variable:
const test = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"accuracy": "rooftop",
"match_code": {
"exact_match": false,
"house_number": "UNMATCHED",
"street": "UNMATCHED",
"postcode": "UNMATCHED",
"place": "UNMATCHED",
"region": "UNMATCHED",
"locality": "NOT_APPLICABLE",
"country": "INFERRED",
"confidence": "low"
},
"place_type": [
"address"
],
"place_name": "3329 Old Georgetowne Road, Edmond, Oklahoma 73013, United States",
"address_number": "3329",
"street": "Old Georgetowne Road",
"context": [
{
"id": "postcode.250457836",
"text_en": "73013",
"text": "73013"
},
{
"id": "place.97216748",
"wikidata": "Q862645",
"text_en": "Edmond",
"language_en": "en",
"text": "Edmond",
"language": "en"
},
{
"id": "district.17426156",
"wikidata": "Q485038",
"text_en": "Oklahoma County",
"language_en": "en",
"text": "Oklahoma County",
"language": "en"
},
{
"id": "region.304364",
"short_code": "US-OK",
"wikidata": "Q1649",
"text_en": "Oklahoma",
"language_en": "en",
"text": "Oklahoma",
"language": "en"
},
{
"id": "country.8940",
"short_code": "us",
"wikidata": "Q30",
"text_en": "United States",
"language_en": "en",
"text": "United States",
"language": "en"
}
],
"id": "address.3132590889692730",
"external_ids": {
"carmen": "address.3132590889692730",
"federated": "carmen.address.3132590889692730"
},
"feature_name": "3329 Old Georgetowne Road",
"matching_name": "3329 Old Georgetowne Road",
"description": "Edmond, Oklahoma 73013, United States",
"metadata": {
"iso_3166_2": "US-OK",
"iso_3166_1": "us"
},
"language": "en",
"maki": "marker",
"postcode": "73013",
"place": "Edmond",
"district": "Oklahoma County",
"region": "Oklahoma",
"region_code": "OK",
"country": "United States",
"country_code": "us",
"full_address": "3329 Old Georgetowne Road, Edmond, Oklahoma 73013, United States",
"address_line1": "3329 Old Georgetowne Road",
"address_line2": "",
"address_line3": "",
"address_level1": "OK",
"address_level2": "Edmond",
"address_level3": "",
"postcode_plus": "0802",
"is_deliverable": true,
"missing_unit": false
},
"text_en": "Old Georgetowne Road",
"geometry": {
"type": "Point",
"coordinates": [
-97.46885,
35.62264
]
}
}
],
"attribution": "NOTICE: © 2022 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
};
const coordinates = test.features.map((a) => a.geometry.coordinates);
console.log(coordinates.flat());
console.log(...coordinates.flat());
I'm looking to check an API response for against a set of values but the API response contains some additional info that I'm not interested in checking against
Data to check:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
}
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "45 Headrow",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 287
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.87"
}
}
]
API response:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
So I'm not interested in what values are returned for dbIdentifier, designAndCondition and developmentCompletionDate as they are not in my data to check against but I would like to compare the values for the rest of the properties. In practice these arrays will have more than 2 items
I was initially thinking I would remove the unwanted properties from the objects using the function below
const newArray = responseBody.map(({ dbIdentifierIdentifier, detail: { designAndCondition, developmentCompletionDate }, ...rest }) => rest)
Then ordering by address.uniqueIdentifier, converting to JSON strings and comparing the strings but the function above doesn't work with the nested properties as newArray doesn't contain the detail object at all
newArray:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
IS it possible to do it the above way by passing a destructured nested object a map function?
One way to remove the unwanted properties from the API response would be to first copy the response into a new array (to preserve the original response), then delete the properties:
const apiResponse = [{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
let apiResponseCopy = JSON.parse(JSON.stringify(apiResponse))
var newArray = apiResponseCopy.map(i => {
delete i.dbIdentifier
delete i.detail.designAndCondition
delete i.detail.developmentCompletionDate
return i
})
console.log(newArray)
Then, you should be able to compare the newArray against your data.
I am searching a City and state by zip code using below HERE API
https://geocode.search.hereapi.com/v1/geocode?qq=postalCode=43026&apiKey=key&in=countryCode%3AUSA,
but it's not returning city field.
the result is below
{ "items": [ { "title": "43026, OH, United States", "id": "here:cm:namedplace:22236211", "resultType": "locality", "localityType": "postalCode", "address": { "label": "43026, OH, United States", "countryCode": "USA", "countryName": "United States", "stateCode": "OH", "state": "Ohio", "postalCode": "43026" }, "position": { "lat": 39.9972, "lng": -83.15518 }, "mapView": { "west": -83.0952, "south": 39.97889, "east": -83.26074, "north": 40.06921 }, "scoring": { "queryScore": 1, "fieldScore": { "postalCode": 1 } } } ] }
can anyone please help
If you run several queries against this api, you'll notice that some results contain a city, and some do not.
For example:
If we run (with api key set to a valid value):
https://geocode.search.hereapi.com/v1/geocode?qq=postalCode=60606&apiKey=key&in=countryCode%3AUSA
We get an address like so
"address": {
"label": "60606, Chicago, IL, United States",
"countryCode": "USA",
"countryName": "United States",
"stateCode": "IL",
"state": "Illinois",
"county": "Cook",
"city": "Chicago",
"postalCode": "60606"
}
Which includes a city value.
Your query returns
"address": {
"label": "43026, OH, United States",
"countryCode": "USA",
"countryName": "United States",
"stateCode": "OH",
"state": "Ohio",
"postalCode": "43026"
},
Which is missing the city field.
You could try using the ZIP+4 code (if you have it) as mentioned in the API docs:
https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics-api/code-geocode-hpc-hsn.html
For example,
https://geocode.search.hereapi.com/v1/geocode?qq=postalCode=43026-0001&apiKey=key&in=countryCode%3AUSA
"address": {
"label": "43026-0001, Hilliard, OH, United States",
"countryCode": "USA",
"countryName": "United States",
"stateCode": "OH",
"state": "Ohio",
"county": "Franklin",
"city": "Hilliard",
"postalCode": "43026-0001"
},
Will return us a city.
NB: Not all Zip+4 codes will return a city name. For example: 43026-0101 will not (this may be because it doesn't exist)
It doesn't look to me like there is any way to guarantee a city field response with just a ZIP code.
I try to make this for a long time and i wrote some test script .I use setInterval to update the content once at 500s but i can't acces the inputs for exemple if i have a form there i don't know how i can write in input without the write been deleted.I use setInterval because i want to see every input from the database .
The index script
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}<input type="text" />
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
setInterval(function(){$http.get("customers.json").then(function (response) {
$scope.myData = response.data.records;
});},500);
});
</script>
</body>
</html>
And the json file
{
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}
]
}
If you want do real-time application, nodejs + socket.io (websocket) will best fit your needs. Here is an example of how to use socket.io(websocket lib):
https://socket.io/get-started/chat/
In addition, any ajax calls will takes time, can easily take more then one second. Therefore, real-time web application need to use websocket instead of transitional ajax call.
I have this table with 15 row.
Plunkr
Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="item in myObj">
<td>{{$index +1}}</td>
<td>{{item.Name}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = [ {
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}]
});
</script>
</body>
</html>
and here's the output:
Let's say I delete an object in the array, total row will be 14 and when I add an object into array, it will return to 15. That was expected.
Now what I want to do is, WITHOUT using controller and everything is done in the VIEW; after I remove an object and add it back, I want the row will shown as 16 and not 15. I mean $index should be increasing and not decreasing.
I have done it with controller but is it possible to do it with only in the view?
Thanks for your time and any help in advance.
You could "soft-delete" the row. Instead of actually removing it from the array, you can simply mark it as deleted. Then the count will continue to increase as you add items:
function softDelete(item) {
item.deleted = true;
}
I don't know why you wouldn't want to use the controller, but this could also be done in the view:
<tr ng-repeat="item in myObj" ng-click="item.deleted = true" ng-hide="item.deleted">
<td>{{$index +1}}</td>
<td>{{item.Name}}</td>
</tr>
Here is a plunker demonstrating:
https://plnkr.co/edit/yuAIXn5Pe9YbwxXW2qih?p=preview