Loop two dimensional array javascript

Question

I Have and array and it will contain values as bellow

SelfData = [
  ["Mortgage on Marrickville investment property (with C. Tebbutt)", "Commonwealth Bank"],
  ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"],
];

I want to show these values in a table similar to this

I tried as bellow.but it's doesn't display values as expected

<table>
  <tr>
    <th></th>
    <th>Nature of liability</th>
    <th>Creditor</th>
  </tr>
  <tr>
    <td>Self</td>
    <td>{SelfData.map((data,i)=>{
       return <tr>{data}</tr>
     })}
    </td>    
  </tr>  
</table>

It's not clear how you're building the HTML. Are you using React or something? — Andy
– Andy, Commented Feb 19, 2022 at 10:44

cmgchess · Accepted Answer · 2022-02-19 11:11:36Z

2

Try something like this. I used the rowspan attribute on the first element row on the table to make the Self column common. For example in this example since the array is of length 2. the rowspan will be 2 therefore the first column will stay common to all rows of the table

<table>
  <tr>
    <th></th>
    <th>Nature of liability</th>
    <th>Creditor</th>
  </tr>
      {SelfData.map((data,i)=>{
       return <tr>
         {i===0 && <td rowSpan={SelfData.length}>Self</td>}
         <td>{data[0]}</td>
         <td>{data[1]}</td>
       </tr> 
     })}
</table>

codesandbox

edited Feb 19, 2022 at 11:11

answered Feb 19, 2022 at 10:48

cmgchess

10.3k42 gold badges55 silver badges70 bronze badges

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

7 Comments

Tje123 Over a year ago

This is working.but what if i have 3 values in the array?in my requirement,values in the inner array can be change

cmgchess Over a year ago

if you meant like 3 rows. then it should still work since rowspan takes length of SelfData array. maybe if u could give an example

Tje123 Over a year ago

I mean something like this SelfData = [["value1","value2","value3"],["valu4", "value5"]]; . then it won't show value3.no of data inside the array can be change

cmgchess Over a year ago

since there are only 3 table headers. 1 empty and 2 for nature and creditor how should that be handled in that case. for example for ["value1","value2","value3"]

Tje123 Over a year ago

in that scenario another header will come as Activities .If there are 3 values in a array,3 headers will display

|

Amila Senadheera · Accepted Answer · 2022-02-19 11:24:22Z

You can use colspan property in td elements to make the first column merge and the vertical-align CSS property to align the text to the top of the cell.

This would also work

const SelfData = [
  [
    "Mortgage on Marrickville investment property (with C. Tebbutt)",
    "Commonwealth Bank"
  ],
  ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"]
];

function App() {
  return (
    <table>
      <tr>
        <th />
        <th style={{ textAlign: "left" }}>Nature of liability</th>
        <th style={{ textAlign: "left" }}>Creditor</th>
      </tr>
      {SelfData.map((data, i) => (
        <tr>
          {i === 0 && (
            <td rowspan="2" style={{ verticalAlign: "top" }}>
              Self
            </td>
          )}
          {data.map((d) => (
            <td>{d}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"))

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Vida Hedayati · Accepted Answer · 2022-02-19 11:27:45Z

1

please try this way:

SelfData = [
  ["Mortgage on Marrickville investment property (with C. Tebbutt)", "Commonwealth Bank"],
  ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"],
];
  return (
    <table>
      <tr>
        <th>Nature of liability</th>
        <th>Creditor</th>
      </tr>
      {SelfData?.map((items, index) => {
        return (
          <tr>
            <td>SelfSelf</td>
            {items?.map((subItems, sIndex) => {
              return <td>{subItems}</td>;
            })}
          </tr>
        );
      })}
    </table>

edited Feb 19, 2022 at 11:27

answered Feb 19, 2022 at 11:01

Vida Hedayati

3361 silver badge8 bronze badges

2 Comments

Andy Over a year ago

Have you tested this to see what the result is?

Tje123 Over a year ago

Yest i have tested this code.but it's create two rows for Self text.but i need Self show once

dever52 · Accepted Answer · 2022-02-19 11:03:52Z

Put your data in a new table:

return (
        <table>
            <tr>
                <th></th>
                <th>Nature of liability</th>
                <th>Creditor</th>
            </tr>
            <tr>
                <td>Self</td>
                <td>
                    <table>
                        {SelfData.map((data, i) => {
                            return <tr>
                                <td>
                                    {data[0]}
                                </td>
                                <td>
                                    {data[1]}
                                </td>
                            </tr>;
                        })}
                    </table>
                </td>
            </tr>
        </table>
    );

Andy · Accepted Answer · 2022-02-19 11:10:12Z

It's not exactly what your screenshot shows, but you could try embedding a table within a table, and then add CSS to try to mimic it as best as possible, adding a rowspan attribute to the first cell using the style property so that it stretches out.

const data = [
  ['Mortgage on Marrickville investment property (with C. Tebbutt)', 'Commonwealth Bank'],
  ['Mortgage on Dulwich Hill investment property', 'Commonwealth Bank'],
];

function Example({ data }) {
  return (
    <table class="primary">
      <tr>
        <td style={{ rowspan: data.length }}>Self</td>
        <td>
          <table class="secondary">
            <tr class="heading">
              <td>Nature of liability</td>
              <td>Creditor</td>
            </tr>
            {data.map(row => {
              return (
                <tr>
                  <td>{row[0]}</td>
                  <td>{row[1]}</td>
                </tr>
              );
            })}
          </table>
        </td>
      </tr>  
    </table>
  );
}

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

table { border-collapse: collapse; }
table.primary { border: 1px solid #343434; }
table.primary td:first-child { padding: 0.5em; }
table.secondary td { border: 1px solid #acacac; padding: 0.5em; }
.heading { background-color: #99FFCC; font-weight: 600; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Collectives™ on Stack Overflow

Loop two dimensional array javascript

5 Answers 5

7 Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related