Transform the array into several different arrays

Question

Transform the array into several different arrays

Having some trouble manipulating this array to get it into the desired form.

This is the initial array:

const children = [
  { type: 'span' },
  { type: 'br' },
  { type: 'span' },
  { type: 'br' },
  { type: 'br' },
  { type: 'span' },
  { type: 'br' },
  { type: 'br' },
  { type: 'br' },
  { type: 'span' },
  { type: 'br' },
  { type: 'span' },
]

The goal is to create an array of arrays where consecutive br values indicate a new subarray. The desired outcome should look like this:

[
  [{type: 'span'}, {type: 'br'}, {type: 'span'}],
  [{type: 'span'}],
  [{type: 'span'}, {type: 'br'}, {type: 'span'}]
]

Please Note: There can be any number of consecutive br tags in the original array.

Considering whether using reduce would be a more efficient approach compared to forEach.

javascript arrays

Answer 1

Answer №1

To optimize the array, consider reducing it.

const
    items = [{ item: 'apple' }, { item: 'orange' }, { item: 'banana' }],
    separator = 'comma',
    outcome = items.reduce((result, object, index, arr) => {
        if (object.item === separator) {
            if (arr[index - 1]?.item === separator) {
                if (result[result.length - 1].length) result.push([]);
                return result;
            } else if (arr[index + 1]?.item === separator) return result;
        }
        result[result.length - 1].push(object.item);
        return result;
    }, [[]]);
    
console.log(outcome);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To optimize the array, consider reducing it.

const
    items = [{ item: 'apple' }, { item: 'orange' }, { item: 'banana' }],
    separator = 'comma',
    outcome = items.reduce((result, object, index, arr) => {
        if (object.item === separator) {
            if (arr[index - 1]?.item === separator) {
                if (result[result.length - 1].length) result.push([]);
                return result;
            } else if (arr[index + 1]?.item === separator) return result;
        }
        result[result.length - 1].push(object.item);
        return result;
    }, [[]]);
    
console.log(outcome);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

It may seem like a simple solution, but it could be worth considering using a different separator instead of \n for better data organization.

let elements = [
  'h1',
  'br',
  'h2',
  'br',
  'br',
  'p',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'p',
  'br',
  'h3'
]

console.log(elements.join("\n").split(/(?:\nbr){2,}\n/).map(element => element.split("\n")))

This method definitely does the job...

Answer 4

It may seem like a simple solution, but it could be worth considering using a different separator instead of \n for better data organization.

let elements = [
  'h1',
  'br',
  'h2',
  'br',
  'br',
  'p',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'br',
  'p',
  'br',
  'h3'
]

console.log(elements.join("\n").split(/(?:\nbr){2,}\n/).map(element => element.split("\n")))

This method definitely does the job...

Answer 5

Answer №3

const formattedString = children
  .map(({ type }) => type) // converting to array of strings
  .map(type => (type === 'br' ? ' ' : type)) // replacing 'br' with space for further processing
  .join('') // converting to a long string 
  .split('  ') // splitting by two 'br's
  .map(row => row.trim()) // removing leading and trailing 'br's
  .map(row => (
    row.replace(' ', '|br|') // restoring 'br'
      .split('|') // splitting into an array
      .map(value => ({ type: value })) // restoring original structure
   )
  );

console.log(formattedString);

Answer 6

const formattedString = children
  .map(({ type }) => type) // converting to array of strings
  .map(type => (type === 'br' ? ' ' : type)) // replacing 'br' with space for further processing
  .join('') // converting to a long string 
  .split('  ') // splitting by two 'br's
  .map(row => row.trim()) // removing leading and trailing 'br's
  .map(row => (
    row.replace(' ', '|br|') // restoring 'br'
      .split('|') // splitting into an array
      .map(value => ({ type: value })) // restoring original structure
   )
  );

console.log(formattedString);

Answer 7

Answer №4

There's a method using reduce that I've put together, but I'm not entirely convinced of its efficiency. Take a look:

const children = [{"type":"span"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"span"}];

const is_br = (item) => item?.type === 'br';

const result = children.reduce(
  (acc, val, i, { [i - 1]: prev, [i + 1]: next }) => {
    if(!is_br(prev) && is_br(val) && is_br(next))
      acc.push([]);
  
    if(is_br(val) && (is_br(prev) || is_br(next)))
      return acc;
    
    acc[acc.length - 1].push(val);
    
    return acc;
  },
  [[]]
);

console.log(result);

Here's a revised version that could potentially function similarly to your original code snippet:

const children = [{"type":"span"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"span"}];

let paragraphs = []
let elements = []
let flag = false
children.forEach((child, idx) => {
  if (child.type !== 'br') {
    flag = false
    elements.push(child)
  } else {
    if (flag) {
      if(elements.length > 1) {
        paragraphs.push(elements.splice(0, elements.length - 1))
      }
      elements = []
    } else {
      elements.push(child)
      flag = true
    }
  }
  
  if(idx === children.length - 1 && elements.length > 0)
    paragraphs.push(elements)
});

console.log(paragraphs);

Answer 8

There's a method using reduce that I've put together, but I'm not entirely convinced of its efficiency. Take a look:

const children = [{"type":"span"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"span"}];

const is_br = (item) => item?.type === 'br';

const result = children.reduce(
  (acc, val, i, { [i - 1]: prev, [i + 1]: next }) => {
    if(!is_br(prev) && is_br(val) && is_br(next))
      acc.push([]);
  
    if(is_br(val) && (is_br(prev) || is_br(next)))
      return acc;
    
    acc[acc.length - 1].push(val);
    
    return acc;
  },
  [[]]
);

console.log(result);

Here's a revised version that could potentially function similarly to your original code snippet:

const children = [{"type":"span"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"br"},{"type":"br"},{"type":"span"},{"type":"br"},{"type":"span"}];

let paragraphs = []
let elements = []
let flag = false
children.forEach((child, idx) => {
  if (child.type !== 'br') {
    flag = false
    elements.push(child)
  } else {
    if (flag) {
      if(elements.length > 1) {
        paragraphs.push(elements.splice(0, elements.length - 1))
      }
      elements = []
    } else {
      elements.push(child)
      flag = true
    }
  }
  
  if(idx === children.length - 1 && elements.length > 0)
    paragraphs.push(elements)
});

console.log(paragraphs);

Answer 9

Answer №5

Below is a versatile solution that performs the following tasks: 1) transforms an array of objects into a string, 2) divides the string based on multiple instances of b, and 3) reverts the split string back into objects:

const children = [
  { type: "span" },
  { type: "br" },
  { type: "span" },
  { type: "br" },
  { type: "br" },
  { type: "span" },
  { type: "br" },
  { type: "br" },
  { type: "br" },
  { type: "span" },
  { type: "br" },
  { type: "span" },
];

const map = { s: "span", b: "br" };

console.log(
  children
    .reduce((s, o) => (s += o.type[0]), "")   // converting object array to a string
    .split(/b{2,}/)                           // splitting string when encountering 2 or more 'b's
    .map((s) => {                             // reverting split strings back into object arrays
      const res = [];
      for (const ch of s) {
        res.push({ type: map[ch] });
      }
      return res;
    })
);

Answer 10

Below is a versatile solution that performs the following tasks: 1) transforms an array of objects into a string, 2) divides the string based on multiple instances of b, and 3) reverts the split string back into objects:

const children = [
  { type: "span" },
  { type: "br" },
  { type: "span" },
  { type: "br" },
  { type: "br" },
  { type: "span" },
  { type: "br" },
  { type: "br" },
  { type: "br" },
  { type: "span" },
  { type: "br" },
  { type: "span" },
];

const map = { s: "span", b: "br" };

console.log(
  children
    .reduce((s, o) => (s += o.type[0]), "")   // converting object array to a string
    .split(/b{2,}/)                           // splitting string when encountering 2 or more 'b's
    .map((s) => {                             // reverting split strings back into object arrays
      const res = [];
      for (const ch of s) {
        res.push({ type: map[ch] });
      }
      return res;
    })
);

Answer 11

Answer №6

Using While Loops for Solution.

We utilize two variables in this solution - i as a counter and temp to store different array slices.
The next step involves a nested while loop, where the first one is for looping and the second is to skip all consecutive occurrences of "br".
A flag is employed to verify if the second while loop was executed.
- If it ran, we push the contents of temp into the resultant array res and clear temp.
- If not, we continue pushing elements to temp.

Furthermore, there are certain checks implemented to handle specific edge cases.

const children = [{type:"span"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"span"}];

const res = [];

let i = 0;
let temp = [];

while (i < children.length) {
  let flag = false;
  while (i < children.length && children[i].type === "br" && children[i + 1]?.type === "br") {
    i++;
    flag = true;
  }
  if (flag) { res.push(temp); temp = []; i++; }
  if (i >= children.length) break;
  temp.push(children[i]);
  i++;
}

if (temp.length > 0) res.push(temp);

console.log(JSON.stringify(res));

Utilizing RegEx for the Solution Approach

(Adapted from Ralkov's approach)

const 
 children = [{type:"span"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"span"}],

 res = children
  .map(({ type }) => `${type} `)
  .join("")
  .replace(/(?:br\s){2,}/g, " ")
  .trim()
  .split("  ")
  .map((s) => s.split(",").map((type) => ({ type })));
  
console.log(JSON.stringify(res));

Answer 12

Using While Loops for Solution.

We utilize two variables in this solution - i as a counter and temp to store different array slices.
The next step involves a nested while loop, where the first one is for looping and the second is to skip all consecutive occurrences of "br".
A flag is employed to verify if the second while loop was executed.
- If it ran, we push the contents of temp into the resultant array res and clear temp.
- If not, we continue pushing elements to temp.

Furthermore, there are certain checks implemented to handle specific edge cases.

const children = [{type:"span"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"span"}];

const res = [];

let i = 0;
let temp = [];

while (i < children.length) {
  let flag = false;
  while (i < children.length && children[i].type === "br" && children[i + 1]?.type === "br") {
    i++;
    flag = true;
  }
  if (flag) { res.push(temp); temp = []; i++; }
  if (i >= children.length) break;
  temp.push(children[i]);
  i++;
}

if (temp.length > 0) res.push(temp);

console.log(JSON.stringify(res));

Utilizing RegEx for the Solution Approach

(Adapted from Ralkov's approach)

const 
 children = [{type:"span"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"br"},{type:"br"},{type:"span"},{type:"br"},{type:"span"}],

 res = children
  .map(({ type }) => `${type} `)
  .join("")
  .replace(/(?:br\s){2,}/g, " ")
  .trim()
  .split("  ")
  .map((s) => s.split(",").map((type) => ({ type })));
  
console.log(JSON.stringify(res));

Transform the array into several different arrays

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Using While Loops for Solution.

Utilizing RegEx for the Solution Approach

Similar questions

What is the method for applying a Redux statement?

Implementing dynamic title rendering based on image in vue.js

What could be causing my onclick code to activate on double click the very first time?

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Apologies, we are experiencing a server error. TypeError: Unable to access the 'map' property of an undefined

Promise.all doesn't pause for Firestore queries to iterate

Running Javascript code to perform drag and drop in Selenium for UI integration testing in Java

Not receiving connections on localhost port 3000

Is object equality compromised when using track by with ngOptions in AngularJS 1.4 migration?

Questions on how to utilize ES6 Express and static methods

Activate a function upon the clicking of a button by utilizing a directive in Angular.js

"Exploring the Intersection of Meteor, NPM Packages, and Fiber Callbacks

A guide to eliminating TextRow and inserting a string into JSON using NodeJs

ajaxform is not providing the correct response

the input text box does not respond to click events

When trying to access the "form" property of a form ElementRef, TypeScript throws an error

Is there a way for me to detect click events on Windows notifications?

Using the Printf Function to Print Elements of a 2D Array

Angular $http.get: How to handle errors effectively?

determining collisions between the character in my game and a specific block within a 2-dimensional array