How to display data from 2 separate arrays in one table in React Js?

Question

In my project I need to display data from 2 separate arrays in one table and I need to make my code responsive, my code:

import "./styles.css";

export default function App() {
  const data = [
    {
      v: "car"
    },
    {
      v: "model"
    },
    {
      v: "accident"
    },
    {
      v: "owner"
    }
  ];

  const info = [
    {
      year: "2010",
      model: "bmv",
      accident: "2019",
      owner: "J.S"
    },
    { 
      year: "2012", 
      model: "bmv", 
      accident: "n/a", 
      owner: "D.W" },
    { 
      year: "2014", 
      model: "bmv", 
      accident: "2016", 
      owner: "J.B" 
    }
  ];
  return (
    <div className="App">
      <table>
        <tr>
          {data?.map((d, i) => (
            <td>{d.v}</td>
          ))}

          {info.map((d) => (
            <>
              <td>{d.year}</td>
              <td>{d.model}</td>
              <td>{d.accident}</td>
              <td>{d.owner}</td>
            </>
          ))}
        </tr>
      </table>
    </div>
  );
}

codeSandbox

I'm mapping through both arrays, result is displayed like this:

car model   accident    owner   2010    bmv 2019    J.S 2012    bmv n/a D.W 2014    bmv 2016    J.B

but I need the result to be:

car  2010           2012       2014

model bmv            bmv       bmv

accident 2019        n/a        2016

owner J.S            D.W      J.B

another problem is that I don't want to specify {d.year} or {d.model in

{info.map((d) => (
            <td>{d.year}</td>
            <td>{d.model}</td>
            <td>{d.accident}</td>
             <td>{d.owner}</td>
          ))}

because when/if new value is added (like lastOwner) it won't be displayed unless I specify {d.lastOwner}

Is there any way to actually combine data from 2 arrays and just map through all the values without specifying them? Any advice and help are greatly appreciated.

antoineso · Accepted Answer · 2021-04-01 17:03:12Z

1

this was just an issue in the html table I put inline style to fit your ui specifications but you can add this style in css stylesheet to:

import "./styles.css";

export default function App() {
  const data = [
    {
      v: "car"
    },
    {
      v: "model"
    },
    {
      v: "accident"
    },
    {
      v: "owner"
    }
  ];

  const info = [
    {
      year: "2010",
      model: "bmv",
      accident: "2019",
      owner: "J.S"
    },
    {
      year: "2012",
      model: "bmv",
      accident: "n/a",
      owner: "D.W"
    },
    {
      year: "2014",
      model: "bmv",
      accident: "2016",
      owner: "J.B"
    }
  ];
  return (
    <div className="App">
      <table style={{ display: "flex" }}>
        <thead style={{ display: "flex", flexDirection: "column" }}>
          <tr style={{display:"flex", flexDirection:"column", margin:"5px"}}>
            {data?.map((d, i) => (
              <th key={i}>{d.v}</th>
            ))}
          </tr>
        </thead>
        <tbody style={{ display:"flex"}}>
          {info.map((d, i) => (
            <tr key={i} style={{display:"flex", flexDirection:"column", margin:"5px"}}>
              <td>{d.year}</td>
              <td>{d.model}</td>
              <td>{d.accident}</td>
              <td>{d.owner}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

answered Apr 1, 2021 at 17:03

antoineso

2,1611 gold badge9 silver badges13 bronze badges

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

1 Comment

nika Over a year ago

thank you for the code, it works but I still need to specify ``` <td>{d.year}</td> <td>{d.model}</td> <td>{d.accident}</td> <td>{d.owner}</td>``` every time, is there a way that I can map through all values in 1 line code? like what if new data is added( like lastOwner), I'll need to add additional code <td>{d.lastOwner}</td>`

Wickdd · Accepted Answer · 2021-04-01 17:15:02Z

1

I am not sure what you mean by you don't want to display d.year and d.model. But to answer your question on how to you basically transpose your table, you can use something like this:

you basically use the value that is in your data table to print out the values in info table that belongs to it. So if you add more data to it, it should still print this.

I use a conditional statement as car and year is different (this has is probably something to do with your info that I didn't understand). So if it is car, then it should print out the year.

return (
<div className="App">
  <table>
    {data?.map((value) => (
      <tr>
        <th>{value.v}</th>
        {info.map((info_value) => (
          <>
            <td>
              {value.v === "car" ? info_value.year : info_value[value.v]}
            </td>
          </>
        ))}
      </tr>
    ))}
    <tr></tr>
  </table>
 </div>
);

As I am not sure how you add the data to the table or what exactly you want printed other than what you showed in your question I am not sure if this is exactly what you are looking for. But it should print out the following:

car      2010  2012 2014
model    bmv   bmv  bmv
accident 2019  n/a  2016
owner    J.S   D.W  J.B

answered Apr 1, 2021 at 17:15

Wickdd

663 bronze badges

2 Comments

nika Over a year ago

hi, thank you for your code, it works but what if in value.v === "car", "car" changes to another value,code will not work or I'll need to change the code, is there a way to display info values without specifying "car". I would love to keep 1 line code like {info_value[value.v]} to display all info values

Wickdd Over a year ago

ok. Can I ask why the first key doesn't correspond with the key in your info array? Like, why do want the value 'car' (in your example) to display 'year'? You should keep the keys somewhat consistent with with eachother so that your code is more reusable. I think I understand what your question is, but I don't understand why the table would be changing and if changed, why wouldn't they correspond to eachother?

Diego Marquez · Accepted Answer · 2021-04-01 21:33:56Z

1

You can use the data array to traverse the properties of each info entry.

https://codesandbox.io/s/zealous-thunder-zoeqp?file=/src/App.js

<table>
        {/* <tr>
          {data.map((d, i) => (
            <th>{d.v}</th>
          ))}
        </tr> */}
        {info.map((entry, i) => (
          <tr>
            {data.map((d, i) => (
              <>
                {entry[d.v] && (
                  <td>
                    <strong>{d.v} :</strong>
                    {entry[d.v]}
                  </td>
                )}
              </>
            ))}
          </tr>
        ))}
      </table>

edited Apr 1, 2021 at 21:33

answered Apr 1, 2021 at 16:56

Diego Marquez

5001 gold badge4 silver badges15 bronze badges

2 Comments

nika Over a year ago

hi, thank you for your help. this way data values are not displayed in the same row as info values, I need them to be displayed in row

Diego Marquez Over a year ago

I think now I understood what you want. I updated the codesandbox and my answer

Collectives™ on Stack Overflow

How to display data from 2 separate arrays in one table in React Js?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related