Reorder or create new array based on object indexes

Question

I need to render the below object into subsequent tr/tds via JSX...

    {
  "0": [
    {
      "colIndex": 0,
      "data": {
        "richTextModule": "Data row 1 cell 1"
      }
    },
    {
      "colIndex": 0,
      "data": {
        "richTextModule": "Data row 2 cell 1"
      }
    }
  ],
  "1": [
    {
      "colIndex": 1,
      "data": {
        "richTextModule": "Data row 1 cell 2"
      }
    },
    {
      "colIndex": 1,
      "data": {
        "richTextModule": "Data row 2 cell 2"
      }
    }
  ],
  "2": [
    {
      "colIndex": 2,
      "data": {
        "richTextModule": "Data row 1 cell 3"
      }
    },
    {
      "colIndex": 2,
      "data": {
        "richTextModule": "Data row 2 cell 3"
      }
    },
    {
      "colIndex": 2,
      "data": {
        "richTextModule": "Data row 3 cell 3"
      }
    }
  ]
}

I've tried

Object.values(obj).map((column, index) => {
    return column.map((row, rowIndex) => {
        return obj[index][rowIndex].data.richTextModule;
    });
}

Expected output should be...

    <tr>
        <td>Data row 1 cell 1</td>
        <td>Data row 1 cell 2</td>
        <td>Data row 1 cell 3</td>
    </tr>
    <tr>
        <td>Data row 2 cell 1</td>
        <td>Data row 2 cell 2</td>
        <td>Data row 2 cell 3</td>   
    </tr>

Any ideas on how to achieve this?

FYI: You're not returning anything from your Object.values().map() call. — ray
– ray, Commented Jul 26, 2022 at 21:19
@ChrisG Surely abstracting the data re-ordering out of the component rendering is a valid way to go about it no? I know how to render tables in React. — Matt Maclennan
– Matt Maclennan, Commented Jul 26, 2022 at 21:22
Sorry, I misread your question. Yes, you'll want to create a two dimensional array first. This has nothing to do with React btw (which is what confused me) — user5734311
– user5734311, Commented Jul 26, 2022 at 21:24
Yeah my mistake @ChrisG - ultimate goal is to render the resulting array into table in JSX but nothing to do with the data sorting I agree — Matt Maclennan
– Matt Maclennan, Commented Jul 26, 2022 at 21:27

GʀᴜᴍᴘʏCᴀᴛ · Accepted Answer · 2022-07-26 21:42:26Z

0

Think what you're trying to do is:

<table>
{Object.values(obj).map((col, index) => <tr key={index}>{
      col.map((row, rowIndex) => <td key={rowIndex}>${obj[index][rowIndex].data.richTextModule}</td>)
    }</tr>
)}
</table>

or you could do:

<table>
  {Object.values(obj).map((col, index) => {
    return (
      <tr key={index}>
        {col.map((row, rowIndex) => {
          return <td key={rowIndex}>${obj[index][rowIndex].data.richTextModule}</td>
        })}
      </tr>
    )
  })}
</table>

You should return in a map, reference:

Rendering an array.map() in React

You also should add a key, reference:

Lists and Keys

edited Jul 26, 2022 at 21:42

answered Jul 26, 2022 at 21:36

GʀᴜᴍᴘʏCᴀᴛ

9,08620 gold badges91 silver badges165 bronze badges

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

2 Comments

user5734311 Over a year ago

The array has to be restructured because the inner arrays contain the cells of a column, not a row

GʀᴜᴍᴘʏCᴀᴛ Over a year ago

ah I thought his issue was he couldnt get it to work and his code was wrong

Collectives™ on Stack Overflow

Reorder or create new array based on object indexes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related