Display/Map Nested JSON fields in React JavaScript

Question

This is my first time to post here in SO. I'm currently developing my skills at JavaScript, React and Material-UI. I am trying to display in a table the biller data from my sample nested JSON file.

It logs in the console but I can't understand why it doesn't display in my table. Please help me :(

Here is my JSON file:

[
  {
    "data": {
      "transactions": [
        {
          "referenceNumber": "2323",
          "transaction": "Reload",
          "details": {
            "sourceAccntNickname": "6jkp",
            "sourceAcountNicknae": "6*****48",
            "transactionDate": "Feb 08, 2018",
            "biller": [
              {
                "billerName": "AT&T",
                "billerAccntNumber": "6***98"
              }
            ],
            "recurring": false,
            "amount": 600000
          },
          "status": "failed"
        },
        {
          "referenceNumber": "2323",
          "transaction": "Reload",
          "details": {
            "sourceAccntNickname": "7jkp",
            "sourceAcountNicknae": "7*****48",
            "transactionDate": "Feb 09, 2018",
            "biller": [
              {
                "billerName": "AT&T",
                "billerAccntNumber": "6***98"
              }
            ],
            "recurring": true,
            "frequency": "Monthly",
            "amount": 700000
          },
          "status": "failed"
        }
      ]
    }
  }
]

Here is my code for displaying the data to my table:

<TableBody>
          {stableSort(SchedData, getComparator(order, orderBy)).map(
            (data, index) => {
              return (
                <TableRow tabIndex={-1} key={index}>
                  <TableCell>
                    {data.data.transactions.map((date, index) => {
                      return (
                        <Typography key={index}>
                          {date.details.transactionDate}
                        </Typography>
                      );
                    })}
                  </TableCell>
                  <TableCell>
                    {data.data.transactions.map((rec, index) => {
                      return (
                        <h1 key={index}>
                          {rec.details.recurring === false ? (
                            <Typography>Future-dated</Typography>
                          ) : (
                            <Typography>{rec.details.frequency}</Typography>
                          )}
                        </h1>
                      );
                    })}
                  </TableCell>
                  <TableCell align='right'>
                    {data.data.transactions.map((bil, index) => {
                      bil.details.biller.map((bilNameAcct, index) => {
                        console.log(
                          bilNameAcct.billerName,
                          bilNameAcct.billerAccntNumber
                        );
                        return (
                          <Typography key={index}>
                            {bilNameAcct.billerName}
                            <br />
                            {bilNameAcct.billerAccntNumber}
                          </Typography>
                        );
                      });
                    })}
                  </TableCell>
                  <TableCell align='right'></TableCell>
                  <TableCell align='right'></TableCell>
                </TableRow>
              );
            }
          )}
        </TableBody>

Here is a image copy of my output and console: OUTPUT/CONSOLE

Any help and tips will be SO much appreciated. Thank you in advance for helping me!

macborowy · Accepted Answer · 2020-08-08 08:50:10Z

1

You forgot to return result from map() function.

Your code:

data.data.transactions.map((bil, index) => {
  bil.details.biller.map((bilNameAcct, index) => { 
    /* ... */ 
  })
})

Working code:

data.data.transactions.map((bil, index) => {
  return bil.details.biller.map((bilNameAcct, index) => { 
    /* ... */ 
  })
})

Full <TableCell />:

<TableCell align="right">
  {data.data.transactions.map((bil, index) => {
    return bil.details.biller.map((bilNameAcct, index) => {
      console.log(
        bilNameAcct.billerName,
        bilNameAcct.billerAccntNumber
      );
      return (
        <Typography key={index}>
          {bilNameAcct.billerName}
          <br />
          {bilNameAcct.billerAccntNumber}
        </Typography>
      );
    });
  })}
</TableCell>

answered Aug 8, 2020 at 8:50

macborowy

1,55410 silver badges14 bronze badges

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

Comments

AlexAV-dev · Accepted Answer · 2020-08-08 08:51:06Z

1

You missed return in map function

 <TableCell align='right'>
    {data.data.transactions.map((bil, index) => {
      return bil.details.biller.map((bilNameAcct, index) => { // you missed it here
        console.log(
          bilNameAcct.billerName,
          bilNameAcct.billerAccntNumber
        );
        return (
          <Typography key={index}>
            {bilNameAcct.billerName}
            <br />
            {bilNameAcct.billerAccntNumber}
          </Typography>
        );
      });
    })}
  </TableCell>

answered Aug 8, 2020 at 8:51

AlexAV-dev

1,1756 silver badges14 bronze badges

Collectives™ on Stack Overflow

Display/Map Nested JSON fields in React JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related