Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Question

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Suppose I have fetched a list of objects from a database:

[{ "id":0 ,"name":"John", "lastname":"Shell" },{ "id":1,...];

and want to display this data using the dynatable plugin:

 data : JSON.stringify(data)
 success: function(data,status){ 
          $('#table').dynatable({
            dataset:{
              records:data
            }
          })
        }

However, I need to change how the 'id' is displayed in the table without altering the original JSON. I want it to appear as 'securityNumber' instead.

      <table id="tabela">
        <thead>
           <th>id</th>
           <th>name<th>
           <th>last_name<th>
        </thead>
      </table>

I can't simply replace 'id' because the plugin uses the attribute of the JSON Object to identify column names.

I've experimented with different plugins and consulted the dynatable documentation, but am open to new solutions.

How should I proceed?

javascript html css json dynatable

Answer 1

Answer №1

If you want to customize the formatting of data in a textTransform method, you can define your own mappings for column names there. Take a look at the documentation here.

Here's an example of how such a method could be implemented:

dynatable.utility.textTransform.customColumnName = function(text) {
  if (text === 'id') return 'security_number';
  return text;
}

Another option is to modify the array using Array.map without altering the original JSON source. For instance:


...
records: data.map((item) => {
  return {
    security_number: item.id,
    name: item.name,
    last_name: item.last_name
  }
}),
...

Answer 2

If you want to customize the formatting of data in a textTransform method, you can define your own mappings for column names there. Take a look at the documentation here.

Here's an example of how such a method could be implemented:

dynatable.utility.textTransform.customColumnName = function(text) {
  if (text === 'id') return 'security_number';
  return text;
}

Another option is to modify the array using Array.map without altering the original JSON source. For instance:


...
records: data.map((item) => {
  return {
    security_number: item.id,
    name: item.name,
    last_name: item.last_name
  }
}),
...

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Answer №1

Similar questions

Tips for effectively assessing user inputs within a secure sandbox environment

Ending Current Tab using angularJS Controller

Rearrange divs from left to right on mobile display

After successfully building with Vite, an error occurs stating "TypeError: can't convert undefined to object." However, during development with Vite, everything functions flawlessly

Move the focus to the previous input field by removing the key

The jQuery UI Tab is failing to scroll within its container

Using a variable as a key for a JavaScript object literal with a string value

The hierarchical structure in the DOM that mirrors an HTML table

Using Ajax to trigger JSON-formatted HTML output

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

Parent passing down React state, but child component fails to update it

Is there a way to use SCTP with Socket.io and Node.js?

Performing a jQuery ajax POST request to log users in

Building a time series collection in MongoDB with Node.js

What is the best way to remove column and row gaps in a Bootstrap grid system?

"Troubleshooting Issue: Why Props in mapStateToProps Aren't Updating After Running an Action in Redux

Transforming a Multi-Dimensional Array into an HTML Table

When the "/" button is clicked, display a menu and highlight the menu choices for selection

Having difficulty adding a custom library from a repository into an Ember project as a dependency

Initial position of jQuery slider