Author: John Au-Yeung

Sometimes, we want to merge two array of objects based on a key with JavaScript.

In this article, we’ll look at how to merge two array of objects based on a key with JavaScript.

How to merge two array of objects based on a key with JavaScript?

To merge two array of objects based on a key with JavaScript, we can use the array map and find methods and the spread operator.

For instance, we write

const arr1 = [
  { id: "abdc4051", date: "2017-01-24" },
  { id: "abdc4052", date: "2017-01-22" },
];

const arr2 = [
  { id: "abdc4051", name: "ab" },
  { id: "abdc4052", name: "abc" },
];

const mergeById = (a1, a2) =>
  a1.map((itm) => ({
    ...a2.find((item) => item.id === itm.id && item),
    ...itm,
  }));

console.log(mergeById(arr1, arr2));

to define the mergeById function.

In it, we call a1.map with a callback that has the contents of the object in a2 that has the same id of the current object in a1, which is itm and the itm object.

We find the object with the same id value as the one being looped through in a1 with

a2.find((item) => item.id === itm.id && item)

We spread the properties of each into a new object and return it.

Conclusion

To merge two array of objects based on a key with JavaScript, we can use the array map and find methods and the spread operator.

Sometimes, we want to limit labels number on Chart.js line chart with JavaScript.

In this article, we’ll look at how to limit labels number on Chart.js line chart with JavaScript.

How to limit labels number on Chart.js line chart with JavaScript?

To limit labels number on Chart.js line chart with JavaScript, we can add the maxTicksLimit property.

For instance, we write

const options = {
  scales: {
    x: {
      ticks: {
        maxTicksLimit: 10,
      },
    },
  },
};

const myLineChart = new Chart(ctx, {
  type: "line",
  data,
  options,
});

to create a Chart object with the canvas context ctx and an object with the options property.

We set the options.scales.x.ticks.maxTicksLimit property to 10 to limit the number of x-axis ticks to 10.

Conclusion

To limit labels number on Chart.js line chart with JavaScript, we can add the maxTicksLimit property.

Sometimes, we want to convert JSON object to JavaScript array.

In this article, we’ll look at how to convert JSON object to JavaScript array.

How to convert JSON object to JavaScript array?

To convert JSON object to JavaScript array, we can use the Object.entries method.

For instance, we write

const jsonData = { "2022-01-21": 1, "2022-01-22": 7 };

console.log(Object.entries(jsonData));

to call Object.entries with the jsonData object to return an array with the key-value pairs of the jsonData object as arrays.

Conclusion

To convert JSON object to JavaScript array, we can use the Object.entries method.

Sometimes, we want to add a year to today’s date with JavaScript.

In this article, we’ll look at how to add a year to today’s date with JavaScript.

How to add a year To today’s date with JavaScript?

To add a year to today’s date with JavaScript, we can use the date’s getFullYear and setFullYear methods.

For instance, we write

const aYearFromNow = new Date();
aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 1);
console.log(aYearFromNow);

to create the aYearFromNow Date object with the current date and time.

Then we call aYearFromNow.getFullYear to get the 4 digit year number of the date.

Then we add 1 to it and use the sum as the argument for setFullYear to increment the year of aYearFromNow by 1.

Conclusion

To add a year to today’s date with JavaScript, we can use the date’s getFullYear and setFullYear methods.

Sometimes, we want to sort 2 dimensional array by column value with JavaScript.

In this article, we’ll look at how to sort 2 dimensional array by column value with JavaScript.

How to sort 2 dimensional array by column value with JavaScript?

To sort 2 dimensional array by column value with JavaScript, we can use the array sort method.

For instance, we write

const arr = [
  [12, "AAA"],
  [12, "BBB"],
  [12, "CCC"],
  [28, "DDD"],
  [18, "CCC"],
  [12, "DDD"],
  [18, "CCC"],
  [28, "DDD"],
  [28, "DDD"],
  [58, "BBB"],
  [68, "BBB"],
  [78, "BBB"],
];

const sortedArr = arr.sort((a, b) => {
  return a[0] - b[0];
});

to call arr.sort with a callback that sorts each array in arr by the value of the first entry in each array in ascending order.

a and b are entries in arr.

Conclusion

To sort 2 dimensional array by column value with JavaScript, we can use the array sort method.