javascript - JSON-Server API request from two api's. I need to enter a postcode and return weather information

Question

I'm using JSON-server to create a weather app.

I would like to call the provided API with a GET request to retrieve the weather data for any given postcode. I.E if user types into the search bar E8 3DB it will return the temperature, clouds and description.

The two api urls are http://localhost:3030/locations and http://localhost:3030/weather

I will post the code I have tried at the bottom but I'm not sure how to go about the nexts steps or if I'm approaching it in the right way.

Is there a away to create a query when the search string has spaces like in a postcode?

Any help is appreciated :)

JSON-server documentation

{
  "locations": [
    {
      "id": 145,
      "postcode": "E8 3DB",
      "eastings": 533638,
      "northings": 184527,
      "country": "England",
      "nhs_ha": "London",
      "longitude": -0.074253,
      "latitude": 51.543824
    },
    {
      "id": 233,
      "postcode": "M5 3AA",
      "eastings": 381457,
      "northings": 397673,
      "country": "England",
      "nhs_ha": "North West",
      "longitude": -2.280845,
      "latitude": 53.475455
    },
    {
      "id": 314,
      "postcode": "B9 4BB",
      "eastings": 408295,
      "northings": 286771,
      "country": "England",
      "nhs_ha": "West Midlands",
      "longitude": -1.879291,
      "latitude": 52.478819
    },
    {
      "id": 144,
      "postcode": "EX1 3AB",
      "eastings": 294187,
      "northings": 93121,
      "country": "England",
      "nhs_ha": "South West",
      "longitude": -3.500568,
      "latitude": 50.728041
    }
  ],
  "weather": [
    {
      "id":2643743,
      "coord": {"lon":-0.07,"lat":51.54},
      "weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],
      "base":"stations",
      "main":{"temp":289.28,"feels_like":285.24,"temp_min":288.71,"temp_max":290.15,"pressure":1016,"humidity":77},
      "visibility":10000,
      "wind":{"speed":6.7,"deg":230},
      "clouds":{"all":90},
      "dt":1604060381,
      "sys":{"type":1,"id":1414,"country":"GB","sunrise":1604040660,"sunset":1604075829},
      "timezone":0,
      "name":"London"
    },
    {
      "id":2643123,
      "coord": {"lon":-2.28,"lat":53.48},
      "weather":[{"id": 500,"main": "Rain","description": "light rain","icon": "10n"}],
      "base":"stations",
      "main":{"temp":285.76,"feels_like":284.05,"temp_min":285.15,"temp_max":285.93,"pressure":1012,"humidity":100},
      "visibility":10000,
      "wind":{"speed":3.6,"deg":270},
      "clouds":{"all":90},
      "dt":1604060843,
      "sys":{"type":1,"id":1379,"country":"GB","sunrise":1604041483,"sunset":1604076019},
      "timezone":0,
      "name":"Manchester"
    },
    {
      "id":3402721,
      "coord":{"lon":-1.88,"lat":52.48},
      "weather":[{"id": 800,"main": "Clear","description": "clear sky","icon": "01d"}],
      "base":"stations",
      "main":{"temp":302.15,"feels_like":304.15,"temp_min":302.15,"temp_max":302.15,"pressure":1014,"humidity":70},
      "visibility":10000,
      "wind":{"speed":4.6,"deg":90,"gust":11.3},
      "clouds":{"all":40},
      "dt":1604061309,
      "sys":{"type":1,"id":8426,"country":"GB","sunrise":1604044422,"sunset":1604088963},
      "timezone":0,
      "name":"Birmingham"
    },
    {
      "id":2015306,
      "coord":{"lon":-3.50,"lat":50.73},
      "weather":[{"id":602,"main":"Snow","description":"heavy snow","icon":"13d"}],
      "base":"stations",
      "main":{"temp":262.28,"feels_like":257.3,"temp_min":262.28,"temp_max":262.28,"pressure":1028,"humidity":96,"sea_level":1028,"grnd_level":1023},
      "visibility":628,
      "wind":{"speed":2.61,"deg":331},
      "clouds":{"all":100},
      "dt":1604061539,
      "sys":{"country":"GB","sunrise":1604016259,"sunset":1604038312},
      "timezone":32400,
      "name":"Exeter"
    }
  ]
}

My attempt so far ...

import React, { useEffect } from "react";
// import { isValid } from "postcode";

export default function PostcodeInputForm() {
  const [postcode, setPostcodeValue] = React.useState("");
  const [longitude, setLongitude] = React.useState("");
  const [latitude, setLatitude] = React.useState("");

  const storePostcode = (event) => {
    event.preventDefault();
    setPostcodeValue(event.target.value);
  };

// Error handling: If there isn't any response from the server return an error

  const checkResponse = (response) => {
    if (!response.ok) throw new Error(`Network error: ${response.status}`);
    return response.json();
  };

  const getLocations = () => {
    fetch("http://localhost:3030/locations")
    .then(checkResponse)
      .then((result) => {
        result.map((object) => {
          console.log(postcode);
          if (object.postcode == postcode) {
            
            setLongitude(object.longitude);
            setLatitude(object.latitude);
          }
        });
      })
  }

  useEffect(() => {
    getLocations();
  }, []);

  console.log(longitude, latitude);
  console.log(postcode);

  
  return (
    <form onSubmit={getLocations()}>
      <input
        placeholder="Enter your postcode... "
        type="text"
        className="postcode-search-bar"
        id="postcode"
        name="postcode"
        required
        value={postcode}
        onChange={storePostcode}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Answer 1

等待大神答复