Material UI: How to display my array of objects into a material ui table

Question

I have this interface and through this interface I display a set of values, and as it is clear, I have a “deduction” and the deduction is an array in which either one, two, three, or several values, and as it is clear from the table that most of the lines contain I have one Deduction value, but in the fourth line with the ID number eleven it contains two Deduction values, and as it is clear in this line that the interface’s shape has changed and become not beautiful, the question and the problem I have is how can I display the Deduction matrix in a better String (numbers behind each other with commas and without spaces) without the line becoming bad

   {n.deductions.map((deduction) => (
                      <TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount}
                      </TableCell>
                    ))}

This is the deduction matrix, I take the quantity and display it

 "deductions": [
            {
                "id": 11,
                "receiptId": 11,
                "type": "loan",
                "amount": 7500,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            },
            {
                "id": 12,
                "receiptId": 11,
                "type": "loan",
                "amount": 1000,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            }
        ]

Well, it depends. Deduction.amount is an array of Strings? or is it an array of numbers? In any case, what you want is to convert the values to strings, and then in the template use something like this: {deduction.amount.join(', ')} This way, you are putting every element of the array in a comma separated string. — TAVentura
– TAVentura, Commented Mar 4, 2022 at 13:04

TAVentura · Accepted Answer · 2022-03-04 16:17:39Z

1

Well, in this case, you should retrieve the 'amount' value from an array of Objects. Try the following:

//in the template
{deduction.map(singleDeduction => singleDeduction.amount)}

The previous code will return an array of 'amount' values. Ussually, when printing arrays, javascript automatically converts the array to a comma separated string. If this doesnt happen, just add .join at the end, like this:

{deduction.map((singleDeduction) => singleDeduction.amount).join(', ')}

Also, if you want to add the '£' symbol to every deduction, do this:

{deduction.map((singleDeduction) => "£" + singleDeduction.amount).join(', ')}

answered Mar 4, 2022 at 16:17

TAVentura

996 bronze badges

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

3 Comments

TAVentura Over a year ago

I've done it, but it has to be approved by community members, just replace your <span>£</span>{deduction.amount} for 'my' {deduction.map((singleDeduction) => "£" + singleDeduction.amount).join(', ')} to se if it works

Hiba Youssef Over a year ago

i have just one problem, where can i put the key in this code? <TableCell // key={deduction.id} className="p-4 md:p-16" component="th" scope="row" align="center" > {"["} {n.deductions .map((singleDeduction) => "£" + singleDeduction.amount) .join(", ")} {"]"} </TableCell>

TAVentura Over a year ago

Based on my little knowledge about React, I think it's okay the way you're doing it. Why? Does it give any trouble to you?

Ahmed Hosny · Accepted Answer · 2022-03-04 13:56:53Z

0

To render the array in this form : [7500, 1000] inside the table cell try this:-

<TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount[0] + "," + deduction.amount[1] }
                      </TableCell>

answered Mar 4, 2022 at 13:56

Ahmed Hosny

4901 gold badge7 silver badges21 bronze badges

3 Comments

Hiba Youssef Over a year ago

But it can be more than two values, how can I treat this case?

Hiba Youssef Over a year ago

can u put the previous code?

Ahmed Hosny Over a year ago

yes it can be two values if deductedAmount is an array , which code ! ?

Collectives™ on Stack Overflow

Material UI: How to display my array of objects into a material ui table

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related