I’m making a simple web dashboard where you can query different keywords for places, add them to a list, and download them as a json using the Google places API. I’m hitting a snag at the last step where I want to convert the collected data from an object to a json string using JSON.stringify and have the user download it.
I set it up that first you keep adding location ID’s to a global list with the nearbySearch() method. When you’re ready to download, you hit the download button and that sets off a second query for the location details, adds them to a js object, converts it to a json string, and has it download as a file.
let placeData = {places:[
{name: 'place name',
price_level: 'price level: 0-no data, 1-4 rating',
rating: 'user rating 1-5',
user_ratings_total: 'number of user ratings'
}
]}
function requestDetails(myCallback){
for(const id of placeIDs){
setTimeout(sendRequest(id),100)
}
myCallback(placeData);
}
function sendRequest(id){
var request = {
placeId: id,
//fields: ['name'],
fields: ['name', 'price_level', 'rating', 'reviews', 'user_ratings_total']
};
detService = new google.maps.places.PlacesService(map);
detService.getDetails(request, detCallback);
function detCallback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
pushData(place);
}
}
}
function pushData(place){
let priceLevel;
let rating;
let reviews;
let userRatings;
if(place.price_level== undefined){priceLevel= 0}
else{priceLevel=place.price_level}
if(place.rating== undefined){rating= 0}
else{rating=place.rating}
if(place.reviews== undefined){reviews= 'no data'}
else{reviews=place.reviews}
if(place.user_ratings_total== undefined){userRatings= 0}
else{userRatings=place.user_ratings_total}
placeData.places.push({
name: place.name.toString(),
price_level: parseInt(priceLevel),
rating: parseInt(rating),
user_ratings_total: parseInt(userRatings)
})
}
function download(content, fileName, contentType) {
const a = document.createElement("a");
const file = new Blob([content], { type: contentType });
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
function onDownload(data){
download(JSON.stringify(data), "myfile.json", "text/plain");
}
the html of the button is set up like this:
<button class="button" id="download" onclick="requestDetails(onDownload)">Download</button>
I had to set up the sendRequest() method with a timeout, because the places API allows you to make 10 calls at a time and that was a quick fix. I ruled out that the json isn’t written because of a wrong data format, the file is empty for any variable I give it if it’s being inserted in the same place as pushData().
If I print out the object before converting it to a string it looks like this;
{places: Array(1)}
places
:
Array(11)
0
:
{name: 'place name', price_level: 'price level: 0-no data, 1-4 rating', rating: 'user rating 1-5', user_ratings_total: 'number of user ratings'}
1
:
{name: 'Bolaka Avoin yhtiö', price_level: 0, rating: 0, user_ratings_total: 0}
2
:
{name: 'RAYAN Pizza Kebab', price_level: 1, rating: 3, user_ratings_total: 99}
3
:
{name: 'Döner king', price_level: 0, rating: 3, user_ratings_total: 165}
4
:
{name: 'Ravintola Ilano', price_level: 0, rating: 4, user_ratings_total: 117}
5
:
{name: 'Yu Zi Ravintola', price_level: 0, rating: 4, user_ratings_total: 13}
6
:
{name: 'Ravintola Wenla', price_level: 0, rating: 3, user_ratings_total: 28}
7
:
{name: 'Shishkebab Helsinki Kontula', price_level: 1, rating: 4, user_ratings_total: 436}
8
:
{name: 'Hesburger Helsinki Kontula', price_level: 2, rating: 3, user_ratings_total: 701}
9
:
{name: 'Subway', price_level: 2, rating: 4, user_ratings_total: 279}
10
:
{name: 'Kalkan Pizza-Kebab-Grilli (Entinen Pizzataxi Kontula)', price_level: 1, rating: 4, user_ratings_total: 249}
length
:
11
[[Prototype]]
:
Array(0)
[[Prototype]]
:
Object
So they are being written, somehow, but on the top most level it registers the array as having only one item, the info item that the object was created with. After opening it, however, it shows that there are 11 items in the array with their data.
when I convert to a string I see only the first item;
{"places":[{"name":"place name","price_level":"price level: 0-no data, 1-4 rating","rating":"user rating 1-5","user_ratings_total":"number of user ratings"}]}
I’m guessing that the timeout is preventing the data to be written before I print it out so I tried putting the onDownload() function as a callback, but it still won’t work. I’m not sure if my syntax is wrong or I’ve missed the right approach here completely. Any advice would be great!
