Issue With forEach in JavaScript inside Lightning Web Component

Question

I am working on a requirement where i have to dynamically generate rows and columns and retain the values entered in each cell. I am trying to iterate over an complex array having array inside each element. The JSON structure looks like this:-

[
  {
    "rowNumber": 1,
    "cellValues": [
      {
        "col": 1,
        "value": "",
        "uniqueid": "12"
      },
      {
        "col": 2,
        "value": "",
        "uniqueid": "22"
      }
    ]
  },
  {
    "rowNumber": 2,
    "cellValues": [
      {
        "col": 1,
        "value": "",
        "uniqueid": "12"
      },
      {
        "col": 2,
        "value": "",
        "uniqueid": "22"
      }
    ]
  }
]

How I am trying to iterate?

I am using forEach to iterate and assign the values to uniqueId.

@track tableCellArray = [
    {
        col: 1,
        value: ''
    }
];
@track tableRowAndColumnArray = [
        {
            rowNumber: 1,
            cellValues: this.tableCellArray
        }

];
this.tableRowAndColumnArray.forEach(element => {
            element.cellValues.forEach(cell => { 
                cell["uniqueid"] = JSON.stringify(cell.col)+JSON.stringify(element.rowNumber);                   
            });
});

What problem i am facing?

The above forEach loop assign the same values for both rows. It should add different value for different rows.

To make you understand the issue, have a look on below pic:-

I do not understand, why its copying the same value under each rows?

I think the problem is in the data JSON itself, did you try to log the values? — Rahul Gawale
– Rahul Gawale, Commented Aug 26, 2020 at 12:46

Mohith Shrivastava · Accepted Answer · 2020-08-26 13:36:35Z

There is absolutely nothing wrong with your code unless the values returned from the server are not in the correct order.

You can sort by row and column before you return response from the apex or another way round sort it on client-side.

A simple run of below code indicates it is working fine

import { LightningElement, track } from 'lwc';

 export default class App extends LightningElement {
  /**
  * @track indicates that if this object changes,
  * the UI should update to reflect those changes.
  */
 @track
 tableRowAndColumnArray = [
 {
"rowNumber": 1,
"cellValues": [
  {
    "col": 1,
    "value": ""
  },
  {
    "col": 2,
    "value": ""
   
    }
  ]
},
{
"rowNumber": 2,
"cellValues": [
  {
    "col": 1,
    "value": ""
  },
   {
    "col": 2,
    "value": ""
     }
    ]
  }
]

constructor() {
 super();
 this.tableRowAndColumnArray.forEach(element => {  
        element.cellValues.forEach(cell => { 
            cell["uniqueid"] = (element.rowNumber).toString() + (cell.col).toString();                  
        });
  });
    console.log(JSON.stringify(this.tableRowAndColumnArray));
  }
 }

The output is as below

[{"rowNumber":1,"cellValues":[{"col":1,"value":"","uniqueid":"11"},{"col":2,"value":"","uniqueid":"12"}]},{"rowNumber":2,"cellValues":[{"col":1,"value":"","uniqueid":"21"},{"col":2,"value":"","uniqueid":"22"}]}]

Stack Exchange Network

Issue With forEach in JavaScript inside Lightning Web Component

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Issue With forEach in JavaScript inside Lightning Web Component

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions