reactJS app rendering an array of object which contain arrays

Question

I have the following object definition:

var idObject = {
    item1: "",
    item2: "",
    item3: "",
    array1: [],
    array2: [],
    array3: []
}

There will always be the same number of items in array1, array2, and array3, so array1.length will equal array2.length will equal array3.length. For this example, lets assume there are 3 items in array1, 3 items in array2, and 3 items in array 3.

There will be multiple instances of the object, so I push them into a different array with this line of code:

idArray.push(idObject);

In this example, lets assume that I end up creating 2 idObject.

Im trying to render the structure. The output should look something like this:

item1       item2       item3
array1[1]   array2[1]   array3[1]
array1[2]   array2[2]   array3[2]
array1[3]   array2[3]   array3[3]

item1       item2       item3
array1[1]   array2[1]   array3[1]
array1[2]   array2[2]   array3[2]
array1[3]   array2[3]   array3[3]

I'm having a problem coming up with the logic to render the data. Any assistance is greatly appreciated.

Why not turn this around and use an array containing objects? : [{"id": 1, "ary":[]},{"id":2,"ary":[]},...] instead of an object containing arrays? Then you can just loop over each item individually and you have all the data you need to create one of the items without the need to refer to array1/array2/array3. — Shilly
– Shilly, Commented Oct 15, 2018 at 14:46

Jonas Wilms · Accepted Answer · 2018-10-15 14:48:10Z

0

Lets start with the array, thats pretty easy, we just take every element and wrap it into a div:

  const List = ({ list }) => list.map(el => (<div>{el}</div>));

Now we have to group a list and a title:

 const TitleList = ({ list, title }) => (<div>
  <h3>{title}</h3>
  <List list={list} />
 </div>);

Now we need another component to turn one of your objects into three title lists:

 const Group = ({ item1, item2, item3, array1, array2, array3 }) => (<div className="row">
   <TitleList list={array1} title={item1} />
   <TitleList list={array2} title={item2} />
   <TitleList list={array3} title={item3} />
 </div>);

Now just map you array:

  const result = idArray.map(props => (<Group {...props} />));

and you get back an array of elements that can be mounted to the DOM:

 ReactDOM.render(result, document.body);

answered Oct 15, 2018 at 14:48

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

Chayemor · Accepted Answer · 2018-10-15 14:59:06Z

How about encapsulating items and arrays into their own keys? Something like

let idObject = {
  'items' : ["1", "2", "3"],
  'arrays' : [ [1,2,3] , [4,5,6], [7,8,9] ]
};

Iterating over that seems simpler. The following code snippet assumes that the number of items corresponds to the number of arrays available.

let idObjectA = {
  'items' : ["1", "2", "3"],
  'arrays' : [ [1,2,3] , [4,5,6], [7,8,9] ]
};

let idObjectB = {
  'items' : ["A", "B", "C"],
  'arrays' : [ [10, 11, 12] , [13,14,15], [16,17,18] ]
};

let idObjects = [idObjectA, idObjectB];

idObjects.forEach((idObject) => {
  let items = idObject.items;
  console.log("-----------------------------New idObject-----------------------------");
  for(let i=0; i<items.length;++i){
    console.log( "Item"+items[i]);
    console.log("Array"+i);
    let item_array = idObject.arrays[i];
    item_array.forEach((value) => {
      console.log(value);
    });
  }
  
});

Hemadri Dasari · Accepted Answer · 2018-10-15 15:21:33Z

0

The below solution would give you what you want

  const outputArray = array1.map((item, index) => (
      <row key={item.id}>
          <col>{item}</col>
          <col>{array2[index]}</col>
          <col>{array3[index]}</col>
      </row>
  )

edited Oct 15, 2018 at 15:21

answered Oct 15, 2018 at 14:51

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Collectives™ on Stack Overflow

reactJS app rendering an array of object which contain arrays

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related