Array index mismatch - if else condition breaking

JavaScript
1

I have a database table like this:

ID VALUE ISEDITABLE
0 Company0 Y
1 Company1 N
2 Company2 N
5 Company5 Y
99 CompanyOther N

And in my react code, after making an api call(not shown in this post) to this table,the results are stored in the sessionStorage of the browser as Key and Value pair as shown below.

Key : categories

Value:

[{
		"id": 0,
		"value": "Company0",
	    "isEditable": "Y",
		"_links": {
			"self": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/0"
			},
			"category": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/0"
			}
		}
	},
	{
		"id": 1,
		"value": "Company1",
		"isEditable": "Y",
		"_links": {
			"self": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/1"
			},
			"category": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/1"
			}
		}
	},
	{
		"id": 2,
		"value": "Company2",
		"isEditable": "Y",
		"_links": {
			"self": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/2"
			},
			"category": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/2"
			}
		}
	},
	{
		"id": 5,
		"value": "Company 5",
		"isEditable": "Y",
		"_links": {
			"self": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/5"
			},
			"category": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/5"
			}
		}
	},
	{
		"id": 99,
		"value": "Company Other",
		"isEditable": "Y",
		"_links": {
			"self": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/99"
			},
			"category": {
				"href": "http://mydevserver.com:443/WebServices/api/categories/99"
			}
		}
	}
]

Basically, it looks like the following in browser:
enter image description here

I have the following actionTemplatefunction in react for displaying EDIT, DELETE and DOWNLOAD buttons as shown below:

In the rowData variable, I have access to the categoryId by using rowData.categoryId which is equivalent to the ID column of the above table.

actionTemplate = (rowData: any) => (
        console.log(rowData),
        <div style={{textAlign: 'center', width: '6em'}}>
            <span>
                { JSON.parse(sessionStorage.getItem('categories') as string)[rowData.categoryId].isEditable === 'N' ?
                   <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
                   :
                  <span>
                  <Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => this.handleClick(rowData, e)} tooltip='Edit'/>
                  <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
                  </span>
                
                }
               

                {
                       rowData.fullPathName !== null &&
                       <Button icon="pi pi-download" tooltip='Download' onClick={(e) => this.handleDownloadClick(rowData, e)} />
                }
            </span>
            
        </div>
       );

My Requirement:

To not show EDIT button when ISEDITABLE column is set to N. And show the EDIT button when ISEDITABLE column is set to Y.

So, I made the changes in the above function to achieve the above requirement. However, I ran into an issue when the array indexes doesn’t match with the ID column of the above table.

For example, the above code runs fine as long as the rowData.categoryId = 0,1 and 2 because till ID = 2 , it matches the array indexes. However, as soon as it reaches ID = 5 or 99, it breaks since array index position for ID = 5 is 4 and for ID = 99 is 5.

Is there a workaround of this problem, other than the approach I used?

Note: Although the function used in this post is used in a react app, I believe this is more of a logical problem solving question than specific language related question and hence posting it in Javascript forum.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.