Iterating over fetched data from API

Question

I'm fairly new to Reactjs and I'm trying to create a webpage which takes in a user input and then fetches data from an API before iterating over the fetched data, comparing the user input to properties of the array in order to the access another property of the user selected object.

My code is below, it compiles ok but when trying to iterate over the objects in the Stations array it logs the first objects area property no matter what the user inputs, for example if user inputs 'Somerset' it still returns the 'area' property of the first object in the array which is not Somerset. Appreciate there's no validation or error handling at the moment. Any help would be appreciated.

import './App.css'; import { useRef } from 'react'; function App() { const nameInputRef = useRef(); async function fetchData() { const enteredValue = nameInputRef.current.value; console.log(enteredValue); const response = await fetch( 'https://environment.data.gov.uk/flood-monitoring/id/floodAreas' ); const data = await response.json(); const newdata = await data.items; const Stations = await newdata.map(myFunction); function myFunction(value) { return { id: value.fwdCode, county: value.county, area: value.eaAreaName, label: value.label, polygon: value.polygon, loc: value.riverOrSea, }; } console.log(Stations); let result = Stations.find( ({ enteredValue }) => enteredValue === Stations.county ); let area = result.area; console.log(area); } return ( <div className="App"> <section>Input your County</section> <br /> <input type="text" ref={nameInputRef}></input> <br /> <button onClick={fetchData}>Show data here..</button> </div> ); } export default App;

You never use enteredValue. Instead you create a new variable with the same name — Konrad
– Konrad, Commented Mar 7, 2023 at 20:11
I recommend reading this article for tips on debugging your code. — Code-Apprentice
– Code-Apprentice, Commented Mar 8, 2023 at 1:07

Milan Patel · Accepted Answer · 2023-03-07 20:14:56Z

You did everything right but when you are comparing the value is where you did the mistake. You wrote ({ enteredValue }) => enteredValue === Stations.county instead of ({ county }) => enteredValue === county as you are not extracting enteredValue from Stations it's county.

So the updated code will be

import { useRef } from 'react'; function App() { const nameInputRef = useRef(); async function fetchData() { const enteredValue = nameInputRef.current.value; console.log(enteredValue); const response = await fetch( 'https://environment.data.gov.uk/flood-monitoring/id/floodAreas' ); const data = await response.json(); const newdata = await data.items; const Stations = await newdata.map(myFunction); function myFunction(value) { return { id: value.fwdCode, county: value.county, area: value.eaAreaName, label: value.label, polygon: value.polygon, loc: value.riverOrSea, }; } console.log(Stations); let result = Stations.find( ({ county }) => enteredValue === county ); let area = result.area; console.log(area); } return ( <div className="App"> <section>Input your County</section> <br /> <input type="text" ref={nameInputRef}></input> <br /> <button onClick={fetchData}>Show data here..</button> </div> ); } export default App;

Collectives™ on Stack Overflow

Iterating over fetched data from API

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related