Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to iterate over a nested object in React.js

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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"
          />

    However, now I am facing a new issue. I am getting -> Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.


  2. 0

    You can use the map() method to iterate over the nested object in React.js. Here’s an example of how you can use it to iterate over the data object:

    const data = {
  "data": [
    {
      "i": 21,
      "att": {
        "lead": "Rent",
        "city": "bangalore"
      }
    },
    {
      "i": 22,
      "att": {
        "lead": "Sale",
        "city": "mumbai"
      }
    }
  ]
};

const TableComponent = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Lead</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        {data.data.map((item) => (
          <tr key={item.i}>
            <td>{item.i}</td>
            <td>{item.att.lead}</td>
            <td>{item.att.city}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search