Efficient approach for combining list elements

Question

Efficient approach for combining list elements

I have a collection of content blocks structured like this:

interface Content{
  type: string,
  content: string | string[]
}
const content: Content[] = [
  {
    type: "heading"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "heading"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "list_item"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
]

I am attempting to develop a function that will consolidate these list_item's into a single list with an array for the content of each item. Therefore, the result of the function for the given input should be:

[
  {
    type: "heading"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "list"
    content: ["whatever","whatever","whatever"]
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "heading"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "para"
    content: "whatever"
  },
  {
    type: "list"
    content: ["whatever", "whatever", "whatever", "whatever"]
  },
  {
    type: "para"
    content: "whatever"
  },
]

I have been experimenting with a three-pointer approach, iterating through the array from i=1 to i < length - 1, keeping track of the prev, curr, and next blocks. However, I am struggling with the logic and how to handle different scenarios.

It seems like a relatively straightforward problem for seasoned algorithm designers, so I am seeking some guidance.

javascript typescript algorithm

Answer 1

Answer №1

Within this code snippet, there is a simple loop that iterates over the elements in the 'content' array. It checks if the type of the current element is 'list_item' and either creates a new object with the type 'list' or appends the content to the existing object if one is already created.

const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];

const res = [];
for (const item of content) {
  if (item.type === 'list_item') {
    if (res[res.length - 1]?.type !== 'list') {
      res.push({ type: 'list', content: [] });
    }
    res[res.length - 1].content.push(item.content);
  } else {
    res.push({ ...item });
  }
}

console.log(res);

Another approach that eliminates the need to repeatedly access the end of the array is to store the active list array in a temporary variable and reset it every time a sequence of 'list_item's concludes. (TSPlayground)

const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];

const res = [];
let temp = [];
for (const item of content) {
  if (item.type === 'list_item') {
    if (!temp.length) {
      res.push({ type: 'list', content: temp });
    }
    temp.push(item.content);
  } else {
    if (temp.length) {
      temp = [];
    }
    res.push({ ...item });
  }
}

console.log(res);

Answer 2

Within this code snippet, there is a simple loop that iterates over the elements in the 'content' array. It checks if the type of the current element is 'list_item' and either creates a new object with the type 'list' or appends the content to the existing object if one is already created.

const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];

const res = [];
for (const item of content) {
  if (item.type === 'list_item') {
    if (res[res.length - 1]?.type !== 'list') {
      res.push({ type: 'list', content: [] });
    }
    res[res.length - 1].content.push(item.content);
  } else {
    res.push({ ...item });
  }
}

console.log(res);

Another approach that eliminates the need to repeatedly access the end of the array is to store the active list array in a temporary variable and reset it every time a sequence of 'list_item's concludes. (TSPlayground)

const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];

const res = [];
let temp = [];
for (const item of content) {
  if (item.type === 'list_item') {
    if (!temp.length) {
      res.push({ type: 'list', content: temp });
    }
    temp.push(item.content);
  } else {
    if (temp.length) {
      temp = [];
    }
    res.push({ ...item });
  }
}

console.log(res);

Answer 3

Answer №2

If you want to transform the array using the reduce method, here's how you can do it:

const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];

const result = content.reduce(function (acc, item) {
    if (item.type !== "list_item") {
        acc.push({...item });
    } else if (acc.at(-1)?.type !== 'list') {
        acc.push({ type: 'list', content: [item.content] });
    } else {
        acc.at(-1).content.push(item.content);
    }
    return acc;
}, []);

console.log(result);

The at(-1) function is utilized to access the last element in the accumulating array, and the ?. syntax is employed to prevent errors when the accumulating array is empty.

Answer 4

If you want to transform the array using the reduce method, here's how you can do it:

const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];

const result = content.reduce(function (acc, item) {
    if (item.type !== "list_item") {
        acc.push({...item });
    } else if (acc.at(-1)?.type !== 'list') {
        acc.push({ type: 'list', content: [item.content] });
    } else {
        acc.at(-1).content.push(item.content);
    }
    return acc;
}, []);

console.log(result);

The at(-1) function is utilized to access the last element in the accumulating array, and the ?. syntax is employed to prevent errors when the accumulating array is empty.

Answer 5

Answer №3

Utilizing JavaScript's built-in array methods appears to be the most optimized approach in this scenario

const a = [
      {
        type: "heading",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "list_item",
        content: "whatever 1"
      },
      {
        type: "list_item",
        content: "whatever 2"
      },
      {
        type: "list_item",
        content: "whatever 3"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "heading",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "list_item",
        content: "whatever 4"
      },
      {
        type: "list_item",
        content: "whatever 5"
      },
      {
        type: "list_item",
        content: "whatever 6"
      },
      {
        type: "list_item",
        content: "whatever 7"
      },
      {
        type: "para",
        content: "whatever"
      },
    ]
    let listItemContent = [];
    const res = a.reduce((total, v) => {
      if(v.type === "list_item") {
        listItemContent.push(v.content);
      }
      else if(listItemContent.length > 0) {
        total.push({type: "list", content: listItemContent});
        listItemContent = [];
      } else {
        total.push(v);
      }
      return total;
    }, []);
    if(listItemContent.length > 0) {
      res.push({type: "list", content: listItemContent});
    }
    console.log(res)

Answer 6

Utilizing JavaScript's built-in array methods appears to be the most optimized approach in this scenario

const a = [
      {
        type: "heading",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "list_item",
        content: "whatever 1"
      },
      {
        type: "list_item",
        content: "whatever 2"
      },
      {
        type: "list_item",
        content: "whatever 3"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "heading",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "para",
        content: "whatever"
      },
      {
        type: "list_item",
        content: "whatever 4"
      },
      {
        type: "list_item",
        content: "whatever 5"
      },
      {
        type: "list_item",
        content: "whatever 6"
      },
      {
        type: "list_item",
        content: "whatever 7"
      },
      {
        type: "para",
        content: "whatever"
      },
    ]
    let listItemContent = [];
    const res = a.reduce((total, v) => {
      if(v.type === "list_item") {
        listItemContent.push(v.content);
      }
      else if(listItemContent.length > 0) {
        total.push({type: "list", content: listItemContent});
        listItemContent = [];
      } else {
        total.push(v);
      }
      return total;
    }, []);
    if(listItemContent.length > 0) {
      res.push({type: "list", content: listItemContent});
    }
    console.log(res)

Efficient approach for combining list elements

Answer №1

Answer №2

Answer №3

Similar questions

The correct usage of && and || operators in javascript

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Requiring addresses for Google Maps in order to display directions

Utilize modules within the AppModule to promote modularization and maintain separation of concerns in Angular 2

Is there a way to replicate Twitter's "what's happening" box on our website?

The function window.addEventListener('load') functions properly on desktop computers, but does not work on mobile devices

Can TypeScript ascertain the object's type dynamically based on the key of its proxy name?

Finding and removing an element using Jquery

Finding tool for locating object names in JSON

Conceal a div while revealing the other div

Validating forms in React with Material-UI using hooks

JS showcase of object literals and their corresponding properties

Encountering ERR_INVALID_HTTP_RESPONSE when trying to establish a connection with a Python gRPC server using @bufbuild/connect

Tips on sorting an array within a map function

Submit a single data value to two separate models in JSON format using MongoDB

What is the best way to rid ourselves of unwanted values?

The component name 'Hidden' is not valid for use in JSX

What is the best way to modify this state without altering the original array?

Steps for filling an HTML table within a dynamically loaded DIV

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?