Author: John Au-Yeung

Sometimes, we want to convert a JavaScript object to an array and sort it.

In this article, we’ll look at how to convert a JavaScript object to an array and sort it.

Convert a JavaScript Object to an Array and Sort it

To convert a JavaScript object to an array and sort it, we can use the Object.entries method to return an array of key value pairs, then use JavaScript array’s map method to return an array with the object values.

Then we can use the JavaScript array sort method to sort the returned entries.

For instance, we write:

const data = {
  1: {
    displayName: "Dude1",
    email: "dude1@example.com<mailto:dude1@example.com>",
    lastActive: 1296980700,
    level: 57,
    timeout: 12969932837
  },
  2: {
    displayName: "Dude2",
    email: "dude2@example.com<mailto:dude2@example.com>",
    lastActive: 1296983456,
    level: 28,
    timeout: 12969937382
  },
  3: {
    displayName: "Dude3",
    email: "dude3@example.com<mailto:dude3@example.com>",
    lastActive: 1296980749,
    level: 99,
    timeout: 129699323459
  }
}

const arr = Object
  .entries(data)
  .map(([key, obj]) => {
    return {
      ...obj,
      index: key
    }
  })
  .sort((x, y) => {
    return x.index - y.index
  });
console.log(arr)

to convert the data object into an array and the sort the entries.

We call Object.entries to return an array of key-value pairs in the data object.

Then we call map with a callback that merges obj with the index set to the key and apply this operation to each entry.

Next, we call sort with a callback that returns x.index - y.index to sort the entries.

As a result, arr is:

[
  {
    "displayName": "Dude1",
    "email": "dude1@example.com<mailto:dude1@example.com>",
    "lastActive": 1296980700,
    "level": 57,
    "timeout": 12969932837,
    "index": "1"
  },
  {
    "displayName": "Dude2",
    "email": "dude2@example.com<mailto:dude2@example.com>",
    "lastActive": 1296983456,
    "level": 28,
    "timeout": 12969937382,
    "index": "2"
  },
  {
    "displayName": "Dude3",
    "email": "dude3@example.com<mailto:dude3@example.com>",
    "lastActive": 1296980749,
    "level": 99,
    "timeout": 129699323459,
    "index": "3"
  }
]

Conclusion

To convert a JavaScript object to an array and sort it, we can use the Object.entries method to return an array of key value pairs, then use JavaScript array’s map method to return an array with the object values.

Then we can use the JavaScript array sort method to sort the returned entries.

Sometimes, we want to draw a flipped or mirrored image with the HTML canvas and JavaScript.

In this article, we’ll look at how to draw a flipped or mirrored image with the HTML canvas and JavaScript.

Draw a Flipped or Mirrored Image with the HTML Canvas and JavaScript

To draw a flipped or mirrored image with the HTML canvas and JavaScript, we can call drawImage with the width multiplied by -1 and the scale method.

For instance, we write:

<canvas></canvas>

to add the canvas element.

Then we write:

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')
const img = new Image()
img.src = 'https://i.picsum.photos/id/943/200/200.jpg?hmac=cFvTm_QTKVRRCLsOsMx1m2RmksDL0_U5AfcmnQ7TVds'
img.onload = () => {
  context.save();
  context.scale(-1, 1);
  context.drawImage(img, 0, 0, img.width * -1, img.height);
  context.restore();
}

to select the canvas with document.querySelector.

Then we call getContext to get the context.

Next, we use the Image constructor to create an img element.

And then we set the src property of the img element to the URL of the image.

Then we set img.onload to a function that draws the image when the image is loaded.

We call scale with -1 and 1 to flip the image.

Then we call drawImage with the img image, the x and y coordinates of the top left corner, and the width and height of the image respectively.

Now we see the flipped image drawn on the screen.

Conclusion

To draw a flipped or mirrored image with the HTML canvas and JavaScript, we can call drawImage with the width multiplied by -1 and the scale method.

Sometimes, we want to multiply each member of an array by a scalar in JavaScript.

In this article, we’ll look at how to multiply each member of an array by a scalar in JavaScript.

Multiply Each Member of an Array by a scalar in JavaScript

To multiply each member of an array by a scalar in JavaScript, we can use the JavaScript array’s map method.

For instance, we write:

const a = [1, 2, 3];
const b = a.map(x => x * 5);
console.log(b)

to call map to multiply each member of the a array by 5 and assign the returned array to b.

Therefore, b is [5, 10, 15] according to the console log.

Conclusion

To multiply each member of an array by a scalar in JavaScript, we can use the JavaScript array’s map method.

Sometimes, we want to get AM or PM from a date with JavaScript.

In this article, we’ll look at how to get AM or PM from a date with JavaScript.

Get AM or PM from a Date with JavaScript

To get AM or PM from a date with JavaScript, we can use the toLocaleTimeString method.

For instance, we write:

const now = new Date()
  .toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  })
  .toLowerCase();
console.log(now)

to call toLocateTimeString on a date.

The 2nd argument is an object with the hour and minute set to the hour and minute format of our choice.

hour12 is set to true so that we see am and pm returned.

Therefore, now should be a time like '11:16 am'.

Conclusion

To get AM or PM from a date with JavaScript, we can use the toLocaleTimeString method.