How to loop through an array and display data within the object of that array, in react and javascript

Question

Say I have an array like this one I want to loop through it and display the data that's inside the objects, any idea how I can do that?

layout: [
    [{
        type: 'text',
        value: 'abc'
    }],
    [{
        type: 'text',
        value: 'def'
    }],
    [
        {
            type: 'text',
            value: '123'
        },
        {}
    ]
]

And here is my loop:

const {layout} = this.state
let rows = []
for (let i = 0; i < layout.length; i++) {
    rows.push(<div className="row" key={i}>
    </div>);
}

Renzo Calla · Accepted Answer · 2017-05-26 13:13:01Z

1

Loop through the array like, and call it by their index like the example below

let layout= [
            [
                {
                    type: 'text',
                    value: 'abc'
                }
            ],
            [
                {
                    type: 'text',
                    value: 'def'
                }
            ],
            [
                {
                    type: 'text',
                    value: '123'
                },
                {}
            ]
        ];

         let rows = [];
         var div = document.createElement('div');
         for (let i = 0; i < layout.length; i++) {
             rows.push('<div className="row" key={i}></div>');
             var s = '<li>'+layout[i][0].type+': '+layout[i][0].value+'</li>'; 
             document.body.innerHTML +=s;
         }

answered May 26, 2017 at 13:13

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

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

1 Comment

Dumisani Over a year ago

Thanks, layout[i][0].type simple logic is what I needed

Jeff Huijsmans · Accepted Answer · 2017-05-26 13:07:11Z

0

In your for loop, you get a number to work with. In this case, i. You can access the contents of i with layout[i]. Push that to your rows object inside the div, that should work.

answered May 26, 2017 at 13:07

Jeff Huijsmans

1,4281 gold badge16 silver badges38 bronze badges

Comments

user6741062 · Accepted Answer · 2017-05-26 13:39:38Z

0

JS Fiddle Demo React Solution

<div>{(layout).map(function(data){ return( data.map(function(data){ return( <div> {data.type+ "\n" +data.value } </div> ) }) ) })}</div>

answered May 26, 2017 at 13:39

user6741062

Comments

Grégory Bourgin · Accepted Answer · 2017-05-26 13:47:43Z

0

I suggest that you use Array.map:

layout.map(row => {
  return (
    <div>
      <input type={row.type} value={row.value} />
    </div>
  )
})

For a complete example with React, see : https://jsfiddle.net/gbourgin/wu737LLj/

Remark: I don't see why you need an array of array for your layout variable

answered May 26, 2017 at 13:47

Grégory Bourgin

9427 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to loop through an array and display data within the object of that array, in react and javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related