Search code examples
javascriptreactjstypescriptdayjs

Insert element between other elements of array if condition is met


Now I have an array like below.

  const reserveList = [
    { name: 'john', start: '2022-09-01' },
    { name: 'mark', start: '2022-09-02' },
    { name: 'ken', start: '2022-09-03' },
    { name: 'sara', start: '2022-09-05' },
  ];

and I want to add empty object if there is empty day between two days like below.

  const reserveList = [
    { name: 'john', start: '2022-09-01' },
    { name: 'mark', start: '2022-09-02' },
    { name: 'ken', start: '2022-09-03' },
    {},
    { name: 'sara', start: '2022-09-05' },
  ];

here is my code(it doesn't work). Is it possible to make it work using map or other ways?

  const newList = (reserveList: Array<any>) => {
    reserveList.map((reserve, index) => {
      dayjs(reserveList[index + 1].start).diff(
        dayjs(reserveList[index].start, 'day') > 1
      ) && reserveList.splice(index + 1, 0, {});
    });
  };

Solution

    1. You can reduce method instead of map, because map is desigened to manipulate each item not add or delete items from the array.

    2. The days.js condition is wrong, this is the correct syntax.

    dayjs(reserveList[index + 1].start).diff( 
        reserveList[index].start, "day"
    )> 1
    

    const reserveList = [
        { name: "john", start: "2022-09-01" },
        { name: "mark", start: "2022-09-02" },
        { name: "ken", start: "2022-09-03" },
        { name: "sara", start: "2022-09-05" },
    ];
    const newList = (reserveList) => {
        return reserveList.reduce((acc, reserve, index) => {
            let dayDifference
            if (reserveList[index + 1]) {
                dayDifference = dayjs(reserveList[index + 1].start).diff(
                    reserveList[index].start, "day"
                ) > 1;
            }
            dayDifference ? acc.push(reserve, {}) : acc.push(reserve);
            return acc;
        }, []);
    };
    console.log(newList(reserveList))
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    With one line function

    const reserveList = [
        { name: "john", start: "2022-09-01" },
        { name: "mark", start: "2022-09-02" },
        { name: "ken", start: "2022-09-03" },
        { name: "sara", start: "2022-09-05" },
    ];
    const newList = (reserveList) => reserveList.reduce((acc, reserve, index) => [...acc, reserve, ...((reserveList[index + 1] ? (dayDifference = dayjs(reserveList[index + 1].start).diff(reserveList[index].start, "day") > 1) : null) ? [{}] : []),],[]);
    
    console.log(newList(reserveList));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>