1

What im trying to do is show the name of the first nearby place from a coordinate inside a div. It just doesn't show.

This is my code that fetches json

  const [business1, setbusiness1] = useState(null);
  useEffect(() => {
      fetch('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8943,151.2330&radius=1000&type=restaurant&keyword=attractions&key=MyApiKey&maxprice=1000')
          .then(response => response.json())
          .then(data => 
          {
            setbusiness1(data.results[0].name)
            console.log("data", data.results)
          });
  }, []);

This is my code that should display the name of the first attraction

  <div className="DetailedDescriptionsHalfLeft">
    agenda planner will be here 
    {business1} asfasfa

  </div>

The result is that it doesn't output anything in the div.

I checked the console output and this is the error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8943,151.2330&radius=1000&type=restaurant&keyword=attractions&key=MYApiKey&maxprice=1000. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
Jim N
  • 123
  • 5
  • Are you sure that data.results[0] has the value you are expecting? – lissettdm Apr 19 '21 at 13:47
  • yes im sure, I checked it in this website. https://www.jsonquerytool.com/ This is the json file: https://pastebin.com/C3pE3Sy1 – Jim N Apr 19 '21 at 13:49
  • It just doesnt output anything for some reason. Is there something wrong with my API call? – Jim N Apr 19 '21 at 13:50
  • Did you checked inside the fetch then block? – lissettdm Apr 19 '21 at 13:55
  • How would I do that? – Jim N Apr 19 '21 at 13:55
  • Add a console.log(data.results) before calling setbusiness1 – lissettdm Apr 19 '21 at 13:56
  • Ill try to do that – Jim N Apr 19 '21 at 13:59
  • Yes, also you can add some text before console.log("data", data.results) and check your browser console if data is printed. If data is not printed then probably your fetch request is failing, so check the network tab in your browser – lissettdm Apr 19 '21 at 14:00
  • I have gotten this error in console Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8943,151.2330&radius=1000&type=restaurant&keyword=attractions&key=MYApiKey&maxprice=1000. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. – Jim N Apr 19 '21 at 14:04
  • Maybe here you can find an answer https://stackoverflow.com/questions/38542306/sending-a-details-request-to-google-places-api-cors-error – lissettdm Apr 19 '21 at 14:09
  • Im using Replit right now and im not sure how to use that answer in replit – Jim N Apr 19 '21 at 14:20

1 Answers1

0

You should probably use async(). Here is a good exemple of how to do it.

https://www.robinwieruch.de/react-hooks-fetch-data

KMAHY
  • 48
  • 1
  • 9
  • Whats the difference between async and fetch? Could you help me out in how to write this with propper syntax? – Jim N Apr 19 '21 at 14:00
  • Fetch() will get the data, while async() will await until the data are there. Please read the page on the link I put on my answer – KMAHY Apr 19 '21 at 14:02
  • @KMAHY the fetch request is OK, there is nothing wrong to use then block – lissettdm Apr 19 '21 at 14:10
  • The fetch request is OK but it does not wait for the response and start to render the html. It needs to await for the response and then display the html. Read the doc. – KMAHY Apr 19 '21 at 14:28