Cannot access data in an object within and object

Question

I am building a react application. I am using Redux to store my state. I am making a request to a back end API which is returning the following data:

{
name: '2020 Crimes Against Women Virtual Conference',
status: 'In Progress',
state: 'Texas',
county: '',
district: 'Texas-32',
type: 'Conference/Workshop',
typeNumber: 102,
fundingSource: '03-350204',
fundingSourceName:
  'FY 19 Internet Crimes Against Children National Training',
fundingSourceGoal: 'Training',
startDate: '04/01/2020',
endDate: '04/05/2020',
fundingPercent: 100,
contact: 'Shawn Guy',
projectStartDate: '04/01/2020',
projectEndDate: '',
goalsAndObjectives:
  'Provide training through various virtual platforms instead of the in-person conference for the 2020 Crimes Against Women Conference.',
successDescription: '...',
accountableStaff: [
  {
    lastName: 'Wagner',
    firstName: 'Lauren'
  },
  {
    lastName: 'Trenary',
    firstName: 'John'
  },
  {
    lastName: 'Lott',
    firstName: 'Timothy'
  }
],
projectId: 4481

},

I am then rendering the data in a component. I am able to access most of the data through a straight .notation

    <Button buttonName='Edit Project' />
  </div>

  <div style={{ backgroundColor: '#F8F8F8' }}>
    <Table className='borderless'>
      <tbody>
        <tr>
          <td>
            <strong>Name: </strong>
            {projects.name}
          </td>
          <td>
            <strong>Status: </strong>
            {projects.status}
          </td>
        </tr>
        <tr>
          <td>
            <strong>State: </strong>
            {projects.state}
          </td>
          <td>
            <strong>County: </strong>
            {projects.county}
          </td>
        </tr>
        <tr>
          <td>
            <strong>Congressional District: </strong>
            {projects.district}
          </td>
          <td>
            <strong>Type: </strong>
            {projects.type}
          </td>
        </tr>
        <tr>
          <td>
            <strong>Funding Source: </strong>
            <br />
            {`${projects.fundingSource} ${projects.fundingSourceName}`}
          </td>
          <td>
            <strong>Funding Source Goal: </strong>
            <br />
            {projects.fundingSourceGoal}
          </td>
          <td>
            <strong>Start Date: </strong>
            <br />
            <Moment format='MM/DD/YYYY'>{projects.startDate}</Moment>
          </td>
          <td>
            <strong>End Date: </strong>
            <br />
            {projects.endDate === null ? (
              ''
            ) : (
              <Moment format='MM/DD/YYYY'>{projects.endDate}</Moment>
            )}
          </td>
          <td>
            <strong>Funding Percent: </strong>
            <br />
            {projects.fundingPercent}
          </td>
        </tr>
        <tr>
          <td>
            <strong>Contact: </strong>
            {projects.contact}
          </td>
        </tr>
        <tr>
          <td>
            <strong>Start Date: </strong>
            <Moment format='MM/DD/YYYY'>{projects.projectStartDate}</Moment>
          </td>
          <td>
            <strong>End Date: </strong>
            {projects.projectEndDate === null ? (
              ''
            ) : (
              <Moment format='MM/DD/YYYY'>{projects.projectEndDate}</Moment>
            )}
          </td>
        </tr>
        <tr>
          <td colSpan='5'>
            <strong>Goals and Objectives: </strong>
            {projects.goalsAndObjectives}
          </td>
        </tr>
        <tr>
          <td colSpan='5'>
            <strong>Success Description: </strong>
            {projects.successDescription}
          </td>
        </tr>
        <tr>
          <td>
            <strong>Accountable Staff</strong>
            <ProjectStaff />
          </td>
        </tr>
        <tr>
          <td>
            <strong>Project ID: </strong>
            {projects.projectId}
          </td>
        </tr>
      </tbody>
    </Table>
  </div>

  <ActivitySummary />
</Fragment>

); };

export default ProjectScreen;

However when I attempt to access the data that is inside the array:

accountableStaff: [
  {
    lastName: 'Wagner',
    firstName: 'Lauren'
  },
  {
    lastName: 'Trenary',
    firstName: 'John'
  },
  {
    lastName: 'Lott',
    firstName: 'Timothy'
  },
  {
    lastName: 'Chatfield',
    firstName: 'Dean'
  }
],

I get an error that says 'map' is not a function. I can console.log the data in the array, but when I try to access the data I get an error. I have been struggling with this for DAYS!!

would need to see exactly how you are defining and attempting to access this array, sounds like you are just referencing the wrong part of the data structure by accident. I'd suggest stepping through it using a debugger or putting a bunch of console.logs of all the related variables to see that everything is defined as you expect it to be, that will eventually point to where you are making an incorrect assumption about a variable's value. — lt1
– lt1, Commented Nov 11, 2020 at 21:42
You are not referencing the project.accountableStaff from the codebase. apply the code so we can get the problem. — urchmaney
– urchmaney, Commented Nov 11, 2020 at 21:42

krimo · Accepted Answer · 2020-11-11 22:57:42Z

1

you should map your accountableStaff

projects.accountableStaff.map((data) => <div>{data.lastName} </div>);

edited Nov 11, 2020 at 22:57

answered Nov 11, 2020 at 22:13

krimo

6942 gold badges8 silver badges27 bronze badges

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

4 Comments

timbo245 Over a year ago

When I attempt to do that I get a typeerror: Cannot read property of 'map' undefined.

krimo Over a year ago

ffrom where you get "projects"

timbo245 Over a year ago

projects is whatI get back from my API. I have de-structured the data. I can see the data when I console.log it. I just cannot access it with either map or key functions.

krimo Over a year ago

try this projects.accountableStaff && projects.accountableStaff.map((data) => <div>{data.lastName} </div>);

Collectives™ on Stack Overflow

Cannot access data in an object within and object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related