How to tidy my returning data into a better model

Question

I have API data that isn't optimized in its structure

I cannot request backend devs restructure it, so I'm looking to tidy the model locally before use in my Angular 2 application.

As an example I receive a flat object which contains tables and user data

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

It would be best to filter these and place Users into a sub object to speed up rendering without conditional testing etc.

Preferred structure:

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

So from original data:

• $id is unimportant (so was deleted)
• sqlTable is the table name
• admin and test are Users

So if we delete the $id, the "rule set" is anything that isn't sqlTable is a User and should be moved to Sub Object called Users.

It would be appreciated if anyone can provide example JS/TS on how to move the data (key/value) into the sub structure based on this ruleset.

Full returning data as requested:

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

Answer 1

I would do some transformations to the data before rendering, something like this:

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

//we map every value in "Values"
let result = data.Value.map(table => {
  //first we create our users object, we copy the full object
  let users = { ...table };
  //then we delete extra keys that we do not want
  delete users.sqlTable;
  delete users.$id;
  //then we build the object with the new structure
  return { sqlTable: table.sqlTable, Users: users };
});

console.log(result);

Answer 2

Your original question asks for an array of users and your comments mention a need for the user object to have a name and permissions key, combining the two together, this transformation can be done in one statement like so,

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);