Since I am new to React Js, I wanted to use google address autocomplete service. So i came to find npm package "react-places-autocomplete" package which is great to implement. But one this i came to found that it return address but no postal_code. Since i needed post_code, has anybody ever done customization to get postal_code using this package ?
id: "0a69230df738495807b4d2a21e399895416cf7ae", description: "8 Burnley Street, Richmond VIC,
Australia", placeId: "ChIJ-RqIcFND1moR6pgdVLp_7Ss", active: false, index: 4, …}
id: "0a69230df738495807b4d2a21e399895416cf7ae"
description: "8 Burnley Street, Richmond VIC, Australia"
placeId: "ChIJ-RqIcFND1moR6pgdVLp_7Ss"
active: false
index: 4
formattedSuggestion: {mainText: "8 Burnley Street", secondaryText: "Richmond VIC, Australia"}
matchedSubstrings: (2) [{…}, {…}]
terms: (5) [{…}, {…}, {…}, {…}, {…}]
types: (2) ["street_address", "geocode"]
__proto__: Object
Postal Code is missing in the response. I hope to get atleast some hints how to do it.
react-places-autocomplete will probably only be using the Places Autocomplete Service, in which case I don't believe that it returns a postcode at all.
So the simple answer would be no, you can't directly get the postcode from react-places-autocomplete or the google places autocomplete service.
The long answer would be, you can make use of other google and free services to get the postcode.
In your prediction you will have a property called place_id, you can then use that with googles getDetails, for example, to get a PlaceResult where you can then get address details.
If at this point you still can't get what you need from google you can then use a free service like https://postcodes.io/ to get the postcode from the lat and lng coordinates.
I have a blog post about using react with google places autocomplete service here that you might find useful.
And a post here about how you can use postcodes with the JavaScript Google Places Api
Sources:
https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service
https://postcodes.io/
https://developers.google.com/maps/documentation/javascript/reference/places-service#PlacesService.getDetails
https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult
Related
I'm using use-places-autocomplete fro getting results from the google api. On my hook I have the following configuration
usePlacesAutocomplete({
requestOptions: {
types: ["address"],
componentRestrictions: {
country: "us",
},
}
But when typing Holly I'm getting some results that don't have specific address as the one that are on the image, because they are cities.
What I'm doing wrong in this case? I want to get only the suggestions from USA with a specific address. Does the hook enabled this ?
Good day everyone, I'm currently having problems using find for array.
Code: https://codeshare.io/EBoBEX
On line 80 is the code I'm unable to make work. Line 69 has a similar function but it works.
Error message:
ERROR TypeError: Cannot read property 'customer_fullname' of undefined
I am basically trying to enter the value into myForm. I am using mongodb and this is what is in the document:
1. _id:6114e3c1c5934f0fc8da2156
2. fullname:"John Pearson"
3. email:"john#gmail.com"
4. address:"Yishun street 69 Blk 420"
5. user_id:"61003363e8ded0257c63592a"
I used user_id: this.authService.getUserID() because after getting the user id from my auth service, I put it into myForm as user_id which I then try to use to find the fullname from my customers as the user_id value is the same as the _id for my users.
When I do console.log(this.customers); it shows the following:
[{…}] 0: address: "Yishun street 69 Blk 420" email: "john#gmail.com" fullname: "John Pearson" user_id: "61003363e8ded0257c63592a" _id: "6114e3c1c5934f0fc8da2156" [[Prototype]]: Object length: 1 [[Prototype]]: Array(0)
What I'm trying to do is find from the customers array based on the user_id, sorry if I was unclear
Any help will be appreciated, thank you so much in advance!
if you use ReactiveForms use formControlName
<select id='name' name='name' formControlName="user_id"
(change)="selectChangeHandler($event)">
To give value to a FomControl in a FormGroup use setValue to give it value
this.myForm.value.id = this.selectedId;
//really I don't know if is user_id or id
this.myForm.get('id').setValue(this.selectedId);
Always you can get a property you can make it two steps:
this.myForm.value.customer_fullname =
this.customers.find(x=>x.user_id===this.myForm.value.user_id)
.customer_fullname;
const customer=this.customers.find(x=>x.user_id===this.myForm.value.user_id)
this.myForm.get('customer').setValue(
customer?customer.customer_fullname:null)
If all the values are related to the element of the array, you can use an unique field, then, in submit you can simple use the element found it: "customer"
I have a simple filter().map() function:
return (<div>{
result.filter((book)=> book.volumeInfo.matureRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))
}</div>)
And I am trying to display the thumbnails for the filtered books. I see in the console log that it is doing just that but it isn't displaying the thumbnails. I am not entirely sure why since I am new to React.
Any advice?
EDIT:
Result returns a JSON object from the Google Books API. Here's a snippit:
allowAnonLogging: true
authors: ["Wendelin Van Draanen"]
averageRating: 4
canonicalVolumeLink: "https://play.google.com/store/books/details?id=LbmL1pKL3dMC"
categories: ["Juvenile Fiction"]
contentVersion: "1.9.6.0.preview.3"
description: "Sometimes it's hard to tell the saints from the sinners... Sammy was supposed to be in church to get out of trouble, not into more. But while she's at St. Mary's working off some school detention time, a valuable cross goes missing and Sammy becomes the prime suspect. She knows she's innocent, and also what it feels like to lose something important. Her treasured catcher's mitt has been stolen--heartless Heather must have taken it to throw Sammy off her game in the upcoming softball play-offs. Trouble is, it's working. Sammy needs that glove back. Throw in nuns in feather boas, a homeless girl in high-tops, a carrot-chomping dog, and a safe that needs cracking, and you've got just another week in the life of Sammy Keyes. Praise for the Sammy Keyes series: “Sammy Keyes is feisty, fearless, and funny. A top-notch investigator!” —New York Times bestselling author Sue Grafton “The sleuth delights from start to finish. Keep your binoculars trained on Sammy Keyes.” —Publishers Weekly “Sammy Keyes is the hottest sleuth to appear in children’s books since Nancy Drew.”—The Boston Globe"
imageLinks: {smallThumbnail: "http://books.google.com/books/content?id=LbmL1pKL3…=frontcover&img=1&zoom=5&edge=curl&source=gbs_api", thumbnail: "http://books.google.com/books/content?id=LbmL1pKL3…=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"}
industryIdentifiers: (2) [{…}, {…}]
infoLink: "https://play.google.com/store/books/details?id=LbmL1pKL3dMC&source=gbs_api"
language: "en"
maturityRating: "NOT_MATURE"
pageCount: 240
panelizationSummary: {containsEpubBubbles: false, containsImageBubbles: false}
previewLink: "http://books.google.com/books?id=LbmL1pKL3dMC&printsec=frontcover&dq=javascript:keyes&hl=&cd=10&source=gbs_api"
printType: "BOOK"
publishedDate: "2008-12-24"
publisher: "Yearling"
ratingsCount: 3
readingModes: {text: true, image: true}
title: "Sammy Keyes and the Sisters of Mercy"
The book.volumeInfo object doesn't have a matureRating. I think you meant to put maturityRating. You're probably getting an empty filtered list as a result.
Change
return (<div>{
result.filter((book)=> book.volumeInfo.matureRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))
}</div>)
to
return (<div>{
result.filter((book)=> book.volumeInfo.maturityRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))
}</div>)
I'm building a service where people can basically find listings based on location. The service is offered in Germany and locations there seem to be extra tricky.
So how is the current setup?
To every listing I'm storing an address like that using nominatim data. The address data is based on zipCodes. So Im receiving zipCodes and out of this storing this address object:
address: {
suburb: "Neukölln",
city_district: "Neukölln",
city: "Berlin",
state: "Berlin",
postcode: "12053",
country: "Deutschland",
country_code: "de",
lat: "52.4775104",
lon: "13.4322809163976",
displayName: "Neukölln, Berlin, 12053, Deutschland"
},
The user in the frontend then uses autosuggest based on komoot api which gives me something in following format:
city: "Berlin"
country: "Deutschland"
name: "Berlin"
osm_id: 240109189
osm_key: "place"
osm_type: "N"
osm_value: "city"
postcode: "10117"
state: "Berlin"
As you can see I can search now with osm_value and name. So I would search city:Berlin.
Theoretically this works quite well. But for bigger cities like Berlin nominatim and komoot are giving very bad results. Often times with nomnatim city is missing even tough there is a city_district. (See this issue: https://github.com/openstreetmap/Nominatim/issues/1487)
My question would be: How could a proper data structure look like and do you have a better idea to build this? Paid services are fine - I just haven't found one proper (besides extremely expensive gmaps).
Requirements are:
Search for zipCode, city, city_district, village, town, county
Having roughly 300k geocodings per month
I am trying to obtain order book (buy, sell, volume, price) info from GDAX.
I am familiar with the Bittrex api - specifically this call:
https://bittrex.com/api/v1.1/public/getmarketsummary?market=usdt-eth
which produces the following response:
{
success: true,
message: "",
result: [
{
MarketName: "USDT-ETH",
High: 770,
Low: 729.70000005,
Volume: 12847.90985907,
Last: 752,
BaseVolume: 9641897.74525487,
TimeStamp: "2017-12-27T13:49:29.463",
Bid: 751.99999999,
Ask: 752.9999,
OpenBuyOrders: 2072,
OpenSellOrders: 1933,
PrevDay: 738.99899999,
Created: "2017-04-20T17:26:37.647"
}
]
}
Does anyone know what the equivalent call would be in the gdax api ?
I am using Python and tried out Client.get_product_order_book('ETH-USD')
but its output is limited and the order book seems rather thin.
In [54]: client.get_product_order_book('ETH-USD')
Out[54]:
{'asks': [['756.97', '168.24847073', 8]],
'bids': [['756.96', '77.74495889', 14]],
'sequence': 1810832728}
Based on the docs the call above with level=1 corresponds to the inside
(i.e. best bid and ask prices)
But the output from the Bittrex api seems to be the best bid and ask prices as
well. So does anyone know the difference ?
Does anyone know what the equivalent call would be in the gdax api ?
If you want something similar, a better try would be:
>> client.get_product_24hr_stats('ETH-USD')
>> {
"open": "416.11000000",
"high": "433.83000000",
"low": "410.11000000",
"volume": "91763.71115699",
"last": "432.79000000",
"volume_30day": "4011593.85194549"
}
I am using Python and tried out Client.get_product_order_book('ETH-USD') but its output is limited and the order book seems rather thin.
Level Description
1 Only the best bid and ask
2 Top 50 bids and asks (aggregated)
3 Full order book (non aggregated)
You are calling it with the default level of 1 so you are only getting the lowest ask and the highest bid, only 2, so yes, it's thin. If you need more info, consider calling it with level 2 or 3 according to the snippet above taken from the GDAX official docs. More here.
But the output from the Bittrex api seems to be the best bid and ask prices as well. So does anyone know the difference ?
The difference is that Bittrex only gives you the best bid and ask price while GDAX api gives you the bid/ask price, the total size of all the orders, and the number of orders.