Tips for organizing my data upon its return into a more efficient structure

Question

Tips for organizing my data upon its return into a more efficient structure

I need to restructure API data that is not optimized in its current format

Unfortunately, I am unable to ask backend developers to make the necessary changes, so I am exploring ways to clean up the model locally before using it in my Angular 2 application.

For instance, the data I receive is a flat object containing tables and user information

{$id: "400", sqlTable: "Customer", admin: 1, test: 3}

It is more efficient to filter this data and place users into a sub-object in order to speed up rendering without the need for conditional testing.

Desired structure:

"sqlTable":"value",
"Users":[
  "user1name":permission,
  "user2name":permission
]

From the original data:

$id is not essential (thus, it was removed)
sqlTable represents the table name
admin and test fields are considered as Users

Therefore, the "rule set" is that anything other than sqlTable is classified as a User and should be transferred to a Sub Object called Users.

I would greatly appreciate it if someone could provide an example in JS/TS on how to move the key/value data into the sub-structure based on these rules.

Here is the complete returned data:

{  
   "$id":"399",
   "IsFailure":false,
   "IsSuccess":true,
   "Value":[  
      {  
         "$id":"400",
         "sqlTable":"Customer",
         "admin":1,
         "test":null
      },
      {  
         "$id":"401",
         "sqlTable":"CustomerAddress",
         "admin":null,
         "test":null
      },
      {  
         "$id":"402",
         "sqlTable":"NewTable",
         "admin":null,
         "test":null
      }
   ]
}

javascript typescript angular-cli-v6

Answer 1

Answer №1

To enhance the data presentation, I would first apply some transformations to the data. Here's an example of how I would approach it:

const data = {
  $id: "399",
  IsFailure: false,
  IsSuccess: true,
  Value: [
    {
      $id: "400",
      sqlTable: "Customer",
      admin: 1,
      test: null
    },
    {
      $id: "401",
      sqlTable: "CustomerAddress",
      admin: null,
      test: null
    },
    {
      $id: "402",
      sqlTable: "NewTable",
      admin: null,
      test: null
    }
  ]
};

// Perform mapping on each item in "Value"
let result = data.Value.map(table => {
  // Create a new object 'users' by spreading the original object
  let users = { ...table };
  // Remove unnecessary keys from 'users'
  delete users.sqlTable;
  delete users.$id;
  // Rearrange the object to fit the new structure
  return { sqlTable: table.sqlTable, Users: users };
});

console.log(result);

Answer 2

To enhance the data presentation, I would first apply some transformations to the data. Here's an example of how I would approach it:

const data = {
  $id: "399",
  IsFailure: false,
  IsSuccess: true,
  Value: [
    {
      $id: "400",
      sqlTable: "Customer",
      admin: 1,
      test: null
    },
    {
      $id: "401",
      sqlTable: "CustomerAddress",
      admin: null,
      test: null
    },
    {
      $id: "402",
      sqlTable: "NewTable",
      admin: null,
      test: null
    }
  ]
};

// Perform mapping on each item in "Value"
let result = data.Value.map(table => {
  // Create a new object 'users' by spreading the original object
  let users = { ...table };
  // Remove unnecessary keys from 'users'
  delete users.sqlTable;
  delete users.$id;
  // Rearrange the object to fit the new structure
  return { sqlTable: table.sqlTable, Users: users };
});

console.log(result);

Answer 3

Answer №2

Your original inquiry sought an array of users, and your feedback highlighted the necessity of including a name and permissions key in the user object. By merging these requirements, you can achieve the desired transformation in a single statement as shown below:

const result = data.Value.map(value => ({
      table: value.sqlTable,
      users: Object.entries(value).filter(([key]) => key !== "$id" && key !== "sqlTable")
        .map(([key, value]) => ({
          name: key,
          permissions: value
        }))
    }))

const data = {
  $id: "399",
  IsFailure: false,
  IsSuccess: true,
  Value: [{
      $id: "400",
      sqlTable: "Customer",
      admin: 1,
      test: null
    },
    {
      $id: "401",
      sqlTable: "CustomerAddress",
      admin: null,
      test: null
    },
    {
      $id: "402",
      sqlTable: "NewTable",
      admin: null,
      test: null
    }
  ]
};


const result = data.Value.map(value => ({
  table: value.sqlTable,
  users: Object.entries(value).filter(([key]) => key !== "$id" && key !== "sqlTable")
    .map(([key, value]) => ({
      name: key,
      permissions: value
    }))
}))

console.log(result);

Answer 4

Your original inquiry sought an array of users, and your feedback highlighted the necessity of including a name and permissions key in the user object. By merging these requirements, you can achieve the desired transformation in a single statement as shown below:

const result = data.Value.map(value => ({
      table: value.sqlTable,
      users: Object.entries(value).filter(([key]) => key !== "$id" && key !== "sqlTable")
        .map(([key, value]) => ({
          name: key,
          permissions: value
        }))
    }))

const data = {
  $id: "399",
  IsFailure: false,
  IsSuccess: true,
  Value: [{
      $id: "400",
      sqlTable: "Customer",
      admin: 1,
      test: null
    },
    {
      $id: "401",
      sqlTable: "CustomerAddress",
      admin: null,
      test: null
    },
    {
      $id: "402",
      sqlTable: "NewTable",
      admin: null,
      test: null
    }
  ]
};


const result = data.Value.map(value => ({
  table: value.sqlTable,
  users: Object.entries(value).filter(([key]) => key !== "$id" && key !== "sqlTable")
    .map(([key, value]) => ({
      name: key,
      permissions: value
    }))
}))

console.log(result);

Tips for organizing my data upon its return into a more efficient structure

Answer №1

Answer №2

Similar questions

Explicit declaration of default parameters

Adjust the dimensions of a Three.js generated 3D cube dynamically during execution

Avoiding infinite loops in JavaScript events

Leveraging the Power of JavaScript within Angular 12

Establishing the maximum width of a Vuetify expansion panel component

Tips for integrating Typescript definitions into the Express req and res objects

What is the process by which JavaScript evaluates the closing parenthesis?

Interpret a JavaScript array response

Tips for verifying the presence of a value within an array using checkboxes

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

NPM is lacking in providing sufficient guidance on resolving dependency problems

Problem with vueJS List Transition not being triggered

Building TypeScript Model Classes

Exploring the concept of self in JavaScript

Identifying when an image element is within the viewport using jQuery Mobile

What is the best way to open a browser window at a quarter of its default size?

Ensuring User Input Integrity with JavaScript Prompt Validation

How can I create a clickable <div> element containing multiple links and trigger only one action?

Uploading photos to Postgres through express/multer

What types should you use for an Axios response in React and TypeScript?