Error Iterating through a nested array in Javascript

Question

I am looping through an array of objects and displaying the result in a table.

renderProducts(){
        return this.state.products.map((product, index) => (
            <tr key={product.id}>
                <td>{product.code}</td>
                <td>{product.name}</td>
                <td>{product.price}</td>
                <td>{this.renderVariants(product.variants)}</td>
            </tr>
        ))
    }

Now, product.variants is also an array of objects. So I need to loop through the array and assign to a variable. This is what this array looks like,

variants: Array(2)
0: {color: "red,blue"}
1: {size: "m,39"}

I want to loop through this array and show the result like this, Color - red, blue, Size - m, 39. This is what I am trying to do -

renderVariants(variants){
        if (variants != null && variants.length > 0) {
            variants.map((variant, index)  => {
                for(var key in variants) {
                    var color = variants[key].color;
                    var size = variants[key].size;
                    var message = color+size;
                }
            });
        }else{
            var message = 'null';
        }
        return message;
    }

This only returns 'null' and returns empty for the color and size. How do I display the results the way I earlier said. Also, for example, the array may look like this too:

variants: Array(1)
0: {size: "t,u"}

So the result would be Size - t,u. How do I check if size, color is present before displaying their values? Thanks

Dhananjai Pai · Accepted Answer · 2019-10-10 18:22:08Z

1

A simpler approach may be to reduce the object and map the array to a string like below.

let variants = [{color: "red,blue"}, {size: "m,39"}];
let result = variants.map(obj => 
  Object.entries(obj).reduce((s,[key,val]) => s+=`${key[0].toUpperCase()+key.slice(1)} - ${val}`,'')); // creates a string of the required type
result = result.join(', ');
console.log(result);

renderVariants(variants){
    return variants && variants.map(obj => 
      Object.entries(obj).reduce((s,[key,val]) => s+=`${key[0].toUpperCase()+key.slice(1)} - ${val}`,'')).join(', ');
}

edited Oct 10, 2019 at 18:22

answered Oct 10, 2019 at 17:53

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

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

8 Comments

Ry- Over a year ago

join would be more appropriate than reduce + slice off comma.

shekwo Over a year ago

Without console.log(result), result is empty. It shows nothing on the table

Dhananjai Pai Over a year ago

you must return the result !

shekwo Over a year ago

I am returning it. renderVariants(variants){ result = ''; if (variants != null && variants.length > 0) { let result = variants.map(obj => Object.entries(obj).reduce((s,[key,val]) => s+=${key[0].toUpperCase()+key.slice(1)} - ${val},'')); // creates a string of the required type result = result.join(', '); }else{ var result = 'null'; } return result; }

shekwo Over a year ago

Works. Changed 'let' to 'var'

|

chans · Accepted Answer · 2019-10-10 17:55:41Z

0

Declare message variable outside if condition

renderVariants(variants){
      var message = '';
        if (variants != null && variants.length > 0) {
            variants.map((variant, index)  => {
                for(var key in variants) {
                    var color = variants[key].color;
                    var size = variants[key].size;
                    message = color+size;
                }
            });
        }else{
            var message = 'null';
        }
        return message;
    }

answered Oct 10, 2019 at 17:55

chans

5,26020 silver badges44 bronze badges

Comments

giuseppedeponte · Accepted Answer · 2019-10-10 18:00:00Z

0

You could map on the array then merge each object entry then join the array

const variants = [{
    color: "red,blue"
  },
  {
    size: "m,39"
  }
]

let v = variants.map(variant => Object.entries(variant).flat().join(' - ')).join(', ')

console.log(v)

answered Oct 10, 2019 at 18:00

giuseppedeponte

2,3711 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

Error Iterating through a nested array in Javascript

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related