How To Format API JSON Response To An Array Object In JS?

I am creating a dashboard in ReactJS and I am using axios to make API calls.

API Response

const response = {
  users: {
    144: [
      {
        name: "Olivia",
      },
      {
        mode: "c7",
        fkProductsIds: [ 3, 2 ]
      }
    ],
    168: [
      {
        name: "Jill",
      },
      {
        mode: "p9",
        fkProductsIds: [ 1, 4, 5, 3 ]
      }
    ],
    202: [
      {
        name: "David",
      },
      {
        mode: "p9",
        fkProductsIds: [ 5, 1, 2 ]
      }
    ]
  },
  products: [
    { 1: "PSM" },
    { 2: "FP" },
    { 3: "F2" },
    { 4: "Mark4" },
    { 5: "Astrid" },
  ]
}

I want to convert this response to an array so that I can easily use this data to show in a list on UI.

What I already have tried is

render(){

  // --> Logic start
  var data = Object.keys(response.users).map( userId => {
    var tmp = {}
    tmp.id       = userId
    tmp.name     = response.users[userId][0].name
    tmp.mode     = response.users[userId][1].mode
    tmp.products = response.users[userId][1].fkProductsIds
    return tmp
  })
  // <-- Logic end

  return(
    <ul> { data.map(user=><UserRow user={user} />) } </ul>
  )
}

Output

data = [{
    "id": "144",
    "name": "Olivia",
    "mode": "c7",
    "products": [3, 2]
  }, {
    "id": "168",
    "name": "Jill",
    "mode": "p9",
    "products": [1, 4, 5, 3]
  }, {
    "id": "202",
    "name": "David",
    "mode": "p9",
    "products": [5, 1, 2]
}]

Now how to

1. Sort users by number of products
2. Convert product ids in product key to object
3. Sort products key by id

Expected

const data = [
  {
    id  : 168,
    name: "Jill",
    mode: "p9",
    products: [
      { id: 1, name: "PSM"    },
      { id: 3, name: "F2"     },
      { id: 4, name: "Mark"   },
      { id: 5, name: "Astrid" }
    ]
  },
  {
    id  : 202,
    name: "David",
    mode: "p9",
    products: [
      { id: 1, name: "PSM"    },
      { id: 2, name: "FP"     },
      { id: 5, name: "Astrid" }
    ]
  },
  {
    id  : 144,
    name: "Olivia",
    mode: "c7",
    products: [
      { id: 2, name: "FP" },
      { id: 3, name: "F2" },
    ]
  }
]

As you can see, all users are sorted by the number of products they own and objects inside products key of users is also sorted by id.

You could use sort method in combination with map.

const response = { users: { 144: [ { name: "Olivia", }, { mode: "c7", fkProductsIds: [ 3, 2 ] } ], 168: [ { name: "Jill", }, { mode: "p9", fkProductsIds: [ 1, 4, 5, 3 ] } ], 202: [ { name: "David", }, { mode: "p9", fkProductsIds: [ 5, 1, 2 ] } ] }, products: [ { 1: "PSM" }, { 2: "FP" }, { 3: "F2" }, { 4: "Mark4" }, { 5: "Astrid" }, ] }

getProductById = (id) => {
  var elem = response.products.find(elem => elem[id]);
  return {id : id, name: elem[id]}
}

var data = Object.keys(response.users)
        .map( userId => 
          ({
            id: userId, 
            name: response.users[userId][0].name, 
            mode: response.users[userId][1].mode, 
            products: response.users[userId][1].fkProductsIds.sort().map(getProductById)
        })).sort((a, b) => b.products.length - a.products.length)

console.log(data);