React how to combine data from multiple API and render it

Question

I need to fetch the data from the multiple API and need to render it. I have wrote the code to fetch the data from multiple API am getting the data as expected. The data I am getting is in nested array format. I can't able to populate the data by interpolating the state. Since the data is in nested format I need to map it, since I am having multiple API call, I'm struggling to combine and map all the data from the API. How to combine all the data and perform map and render the data. Any body can guide me what I have to do to achieve this. Thanks in advance. I have wrote down the API call and data format I am getting.

   API Call:
    
     const [nanOne, setNanOne] = useState([]);
      const [nanTwo, setNanTwo] = useState([]);
      //   const [batch, setBatch] = useState([]);
    
      const fetchData = () => {
        const UserAPI = "https://reqres.in/api/users/2";
        const AirlineAPI = "https://reqres.in/api/users/2";
    
        const getUserData = axios.get(UserAPI);
        const AirlineData = axios.get(AirlineAPI);
    
        axios.all([getUserData, AirlineData]).then(
          axios.spread((...allData) => {
            console.log("data", allData.data);
            const allUserList = allData[0].data.first_name;
            console.log(allUserList);
            const allAirlineData = allData[1].data.last_name;
            // const allBatch = allData[2].data.id;
    
            setNanOne(allUserList);
            setNanTwo(allAirlineData);
            // setBatch(allBatch);
          })
        );
      };
    
    
      useEffect(() => {
        fetchData();
      }, []);
    
      return (
    
      <div class="col-md-8">
              <div
                class="artcileData"
                style={{ marginRight: "85px", height: "80%" }}
              >
                <div Container="container-fluid" class="border">
    
                  <div class="card" style={{ textAlign: "Left" }}>
                    <div class="card-body">
                      <h5 class="card-title">Special title treatment</h5>
                      <p class="card-text">
                        <Badge
                          bg="info"
                          style={{
                            position: "absolute",
                            right: "20px",
                            top: "15px",
                          }}
                        >
                          {/* {batch} */}
                        </Badge>
                       {nanOne} --------> This is not working since I need to map it
                       {nanTwo}
                      </p>
    
                      {/* <a href="#" class="btn btn-primary">Go somewhere</a> */}
                    </div>
                  </div>
                </div>
              </div>
            </div>

Data Format:

data 
(2) [{…}, {…}]
0:
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data:
data: {id: 2, email: '[email protected]', first_name: 'Janet', last_name: 'Weaver', avatar: 'https://reqres.in/img/faces/2-image.jpg'}
support: {url: 'https://reqres.in/#support-heading', text: 'To keep ReqRes free, contributions towards server costs are appreciated!'}

Kinnari Kotadiya · Accepted Answer · 2022-06-08 06:22:02Z

2

There is minor code issue in axios.all function. Let me share the code here. Just replace this function in your code. It should work fine.

 const fetchData = () => {
      const UserAPI = "https://reqres.in/api/users/2";
      const AirlineAPI = "https://reqres.in/api/users/2";
  
      const getUserData = axios.get(UserAPI);
      const AirlineData = axios.get(AirlineAPI);
  
      axios.all([getUserData, AirlineData]).then(
        axios.spread((res1, res2) => {
          console.log("data", res1, res2);
          const allUserList = res1.data?.data?.first_name;
          console.log(allUserList);
          const allAirlineData = res2.data?.data?.last_name;
          // const allBatch = allData[2].data.id;
  
          setNanOne(allUserList);
          setNanTwo(allAirlineData);
        })
      );
    };

answered Jun 8, 2022 at 6:22

Kinnari Kotadiya

544 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Still_Learning Over a year ago

it's working! thanks may I know why you have used (?) can you please explain me ? and also I am having another doubt. I am having another state called batch , I need to attach the batch (which will be unique for all the APIS) how can I populate that ?

Kinnari Kotadiya Over a year ago

@Kumar you can also populate batch same as we did. Just use like const allBatch = res2?.data?.data?.id. and set below like setBatch(allBatch). That's all !!!

Collectives™ on Stack Overflow

React how to combine data from multiple API and render it

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related