Display data from database via ID from nested array

Question

I am trying to get data (balance and employee name) to show to the user. I have a nested array, with multiple objects that hold basic employee information. The id I need to access is in the nested objects - see below data structure example from Mongo DB.

The problem I am facing, the only ID I can access is the first id, I have done some research and mongo only displays from the highest ID. How can I access the nested IDs to display the data I need? Is it even possible? I have tried to map in the Axios request as shown in the code, nothing works.

{
    "message": "Post found",
    "data": {
        "company": "HIJ",
        "_id": "60fb75123ca85f76447d2b58",
        "details": [
            {
                "employee": "aa",
                "date": "aa",
                "tax": "aa",
                "balance": "3",
                "fee": 11,
                "notes": "aa",
                "_id": "60fb75123ca85f76447d2b59"
            },
            {
                "employee": "bb",
                "date": "bb",
                "tax": "bb",
                "balance": "3",
                "fee": 12,
                "notes": "bb",
                "_id": "60fb75123ca85f76447d2b5a"
            }
        ],
        "__v": 0
    }
}

here is the code:

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const Success = () => {
  const [company, setCompany] = useState("")
  const [balance, setBalance] = useState("");
  const [employee, setEmployee] = useState("");
  const { id } = useParams();

  useEffect(() => {
    axios
      .get(`http://localhost:5000/get-snapshot-id-test/${id}`)
      .then((res) => {
        console.log("res", res.data.data);
        setBalance(res.data.data.map((b) => b.details.map((innerary) => innerary.balance)));
        setEmployee(res.data.data.map((e) => e.details.map((innerary) => innerary.employee)));
      })
      .catch((err) => {
        console.log(err);
      });
  }, [setBalance, setEmployee, id]);


  return (    
     { balance === "0.00" && <h4>{employee} is paid in full.</h4> }
     { balance !== "0.00" && <h4>{employee} new balance: ${balance}.</h4>}
  );
};
export default Success;

Your example code only shows how you're getting the details balance and employee fields and from a distance, it looks correct. What IDs are you trying to access? — fortunee
– fortunee, Commented Jul 24, 2021 at 7:09
res.data.data is still an object, I think you want res.data.data.details. I see that balance and employee are strings, but it looks like you are updating them both to arrays, but then in the render they appear to be a non-array value. Of the details array which element are you wanting to save? — Drew Reese
– Drew Reese, Commented Jul 24, 2021 at 7:41
@fortunee I want to access the ids in the 'details' array for employee aa and bb — Julie
– Julie, Commented Jul 24, 2021 at 21:24
@DrewReese to access the data on other components I had to do a double map, first mapping the company array and then the details array, i can't figure out how to do this on this component, I tried to map in the JSX but it doesn't seem possible when I change {employye} to {inner.employee} that employee state is no longer used. Hense my map attempt in the Axios — Julie
– Julie, Commented Jul 24, 2021 at 21:31

Julie · Accepted Answer · 2021-07-24 22:16:58Z

1

the answer was to fix the map in the Axios request. Drew Reese lead me in the right direction pointing out the res.data.data.details. Then I needed to take that result and point to the desired state

 useEffect(() => {
axios
  .get(`http://localhost:5000/get-snapshot-id-test/${id}`)
  .then((res) => {
    console.log("RESPONCE", res.data.data.details);
    setBalance(res.data.data.details.map((r) => r.balance));
    setEmployee(res.data.data.details.map((r) => r.employee));
  })
  .catch((err) => {
    console.log(err);
  });
  }, [setBalance, setEmployee, setNotes, id]);

answered Jul 24, 2021 at 22:16

Julie

5341 gold badge9 silver badges24 bronze badges

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

2 Comments

Drew Reese Over a year ago

Oh dang, apparently I had an answer drafted up for you and never posted it, but you've got it. :)

Julie Over a year ago

@DrewReese I would be happy to accept your answer post it and Ill delete mine

Collectives™ on Stack Overflow

Display data from database via ID from nested array

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