1

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:-

enter image description here

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

1
  • I think the problem is in the data JSON itself, did you try to log the values? Aug 26 '20 at 12:46
3

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"}]}]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.