Author: John Au-Yeung

Sometimes, we want to convert array to string while preserving brackets with JavaScript.

In this article, we’ll look at how to convert array to string while preserving brackets with JavaScript.

How to convert array to string while preserving brackets with JavaScript?

To convert array to string while preserving brackets with JavaScript, we can use the JSON.stringify method.

For instance, we write:

const a = [
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5]
];
const s = JSON.stringify(a);
console.log(s)

We call JSON.stringify with a to convert the array a to a string.

Therefore, s is '[[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5]]'.

Conclusion

To convert array to string while preserving brackets with JavaScript, we can use the JSON.stringify method.

Sometimes, we want to add a tooltip div with React and JavaScript.

In this article, we’ll look at how to add a tooltip div with React and JavaScript.

How to add a tooltip div with React and JavaScript?

To add a tooltip div with React and JavaScript, we can add event handlers for the mouseover and mouseout events.

For instance, we write:

import React from "react";

export default function App() {
  const [hover, setHover] = React.useState();
  const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

  const tooltipStyle = {
    display: hover ? "block" : "none"
  };

  return (
    <div>
      <div onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}>
        hover
      </div>
      <div>
        <div style={tooltipStyle}>this is the tooltip!!</div>
      </div>
    </div>
  );
}

We define the hover state to keep track of when we hover over the ‘hover’ div.

Then we add the handleMouseIn and handleMouseOut functions to call setHover to true and false respwectively.

Then we add the mouseover and mouseout event handler to the div with `hover’ in it so that when we hover over it, the tooltip div will show.

We set onMouseOver to handleMouseIn and onMouseOut to handleMouseOut to add the handlers.

Next, we add the tooltip div by adding a div with the style prop set to tooltipStyle.

We set the display CSS property to 'block' if hover is true and false otherwise to show the tooltip when we hover over ‘hover’.

Conclusion

To add a tooltip div with React and JavaScript, we can add event handlers for the mouseover and mouseout events.

Sometimes, we want to split a string at last occurrence of character then join with JavaScript.

In this article, we’ll look at how to split a string at last occurrence of character then join with JavaScript.

How to split a string at last occurrence of character then join with JavaScript?

To split a string at last occurrence of character then join with JavaScript, we can use some string methods.

For instance, we write:

const k = "ext.abc.jpg";
const l = `${k.substring(0, k.lastIndexOf("."))}-fx${k.substring(k.lastIndexOf("."))}`
console.log(l);

to call the substring method to get the substring of k between the first character and the index of the last occurrence of . exclusive.

Then we call substring with the last index of . to the end of the string.

And then we combine them together in a template literal.

We used lastIndexOf to get the index of the last ..

Therefore, l is 'ext.abc-fx.jpg'.

Conclusion

To split a string at last occurrence of character then join with JavaScript, we can use some string methods.

Sometimes, we want to filter an array of objects by array of IDs with JavaScript.

In this article, we’ll look at how to filter an array of objects by array of IDs with JavaScript.

How to filter an array of objects by array of IDs with JavaScript?

To filter an array of objects by array of IDs with JavaScript, we can use the JavaScript array’s filter method.

For instance, we write:

const activeIds = [202, 204]
const serviceList = [{
    "id": 201,
    "title": "a"
  },
  {
    "id": 202,
    "title": "a"
  },
  {
    "id": 203,
    "title": "c"
  },
  {
    "id": 204,
    "title": "d"
  },
  {
    "id": 205,
    "title": "e"
  }
];

const activeServiceList = serviceList.filter((item) => {
  return activeIds.includes(item.id);
});
console.log(activeServiceList);

to call serviceList.filter with a callback that returns the activeIds.includes(item.id).

We call activeIds.includes to check if item.id is in the activeIds array.

This will return the serviceList entries with the id value that is includes in the activeIds array.

Therefore, we get:

[
  {
    "id": 202,
    "title": "a"
  },
  {
    "id": 204,
    "title": "d"
  }
]

logged.

How to filter an array of objects by array of IDs with JavaScript?

To filter an array of objects by array of IDs with JavaScript, we can use the JavaScript array’s filter method.