Iterate over a nested object and provide as "options" to typeahead component

Question

I'm using react-bootstrap-typeahead component in a project. I have following API response data:

{
  "data": [
    {
      "i": 21,
      "att": {
        "lead": "Rent",
        "city": "bangalore"
             }
    }, 
{
... 
}
... 
  ]
}

How do I fetch the city name and provide to options property of the component? Thanks in advance.

Edit 1:

The code to fetch the api response is:

const [myData, setMyData] = useState();

  async function getCities() {

    return await axios.get(`${API_URL}/api/cp`)

  }
  useEffect(() => {

    getCities().then((response) => setMyData(response))
    console.log(myData)

  }, [props])

Edit 2:

async function getCities() {

    const dataOut = await axios.get(`${API_URL}/api/cprops`)

    return dataOut.data

  }
  useEffect(() => {

    getCities().then((response) => setMyData(response))
    console.log(myData)

  }, [props])

Here is the updated code for fetching data

`data.map(item => item.att.city)` See [How can I access and process nested objects, arrays, or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Guy Incognito, May 05 '23 at 06:07
Thanks for the reply. I have tried this, however I'm getting "...cannot read property 'data' of undefined" — Geethika, May 05 '23 at 06:12
Well then the problem is somewhere else. The variable you're trying to use is undefined. — Guy Incognito, May 05 '23 at 06:21
I have added the code where I fetch the data, could you please have a look. — Geethika, May 05 '23 at 06:24
You should use `response.data` as described [here](https://stackoverflow.com/a/48980526/10952503) — Elikill58, May 05 '23 at 06:38
@Elikill58 I have updated the code as per the link you have shared. Still the output is undefined. Please help — Geethika, May 05 '23 at 08:34
@Geethika After using `async/await`, you don't need the `then` method as it's not a promise. To be sure, you can check with `console.log(getCities());` — Elikill58, May 05 '23 at 08:36
@Elikill58 I've modified the code, however, I am getting -> Promise {} and promisestate also as pending. — Geethika, May 05 '23 at 08:45
No, you still need `.then` or `await` since `getCities` is an `async` function, in your case you are `console.log`ging the initial state not the actual data, #1 put a `console.log(dataOut.data)` inside your `getCities` or #2 move the `console.log(myData)` in the top level of your component. — Aleksandar, May 05 '23 at 08:55
I currently have -> getCities().then((response) => setMyData(response)) console.log(myData). First time the data was displayed, after refreshing it is showing undefined again. I do not understand the actual problem here, the netowrk tab shows the resposne data. — Geethika, May 05 '23 at 09:03
Well it seem like there's no issues here, all you have left is to learn the fundamentals of React ? Just remove the `console.log(myData)` that is inside `useEffect`'s Effect callback function's top-scope, it serves as "*pre-fetch-state*" AKA "*current-state*" **it's not the actual data you are receiving from the HTTP request**. For logging the actual data read my previous comment. — Aleksandar, May 05 '23 at 09:10
You have to show more of your code, however the fact that `myData` logs `undefined` on initial mount it means you have `const [myData, setMyData] = useState();` code which sets an `undefined` value to the `myData` — Aleksandar, May 05 '23 at 09:11
@Aleksandar Yes I have removed the statement from the useEffect. I am using the "myData" variable in options. ie , const options = [ myData.data.map(item => {item.att.city}) ] & then using it in the typeahead component as options ={options} , getting undefined error — Geethika, May 05 '23 at 09:16

Geethika · Accepted Answer · 2023-05-12T12:35:33.157

Thanks all for your help. I was able to implement the following solution:

const getData = async () => {
    const response = await axios.get(
      `${API_URL}/api/cprops` 
    );
    setMyData(response)  };

This method is called after the dropdown option is selected. Code :

 const handleDropdownChange = (selectedOption) => {
    setSelectedOption(selectedOption);
    getData();
  };

The options paramter:

options = [
 myData.data.map((item) => {
   {(item.attributes.city)}
      
     })
   ]

The component:

           <Typeahead
         
            onChange={(selected) => {
              setSelectedLoc(selected)
            }}
           options = {options}
            placeholder="City"
          />

Iterate over a nested object and provide as "options" to typeahead component

1 Answers1