Split an array of booleans into smaller repeatable chunks of arrays in javascript

Question

I'm reaching out to see if there are anyone that could point me to the right direction. I have a program that produces an array of booleans that consist of either false(0) og true(1). Like this: [0,0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,1,0,0,1,1,1,0,0,1,0]. This array is usually between 50 and 400 long. Instead of showing the whole array to the end user I want to make it more "readable". One of the things I have to do is to split in into smaller repeatable chunks of arrays that shows how many times it should repeated (1 to n times). I'll give som examples:

Example number 1 simple:

Before: [1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1] 
After: [1,0,1]*7 time, 

Example number 1 more complex:

Before: [1,1,1,0,1,1,0,1,1,0,1,1,0,1,0,0,1,0,1,1,0,1] 
After: [1,1]*1 time, [1,0,1]*4 times, [0,0] *1 time, [1,0,1]*2 times

As you can see from the examples both before and after is actually the same but only different way of printing it.

Remember that in my program I can have bigger arrays (size up to 400). And often it is much easier to print out (to the user) [1,0,1,1]* 55 than [1,0,1,1,...< long array>...,1,0,1,1]

Edit: The main goal is to make the array easier to read, since it will be read 1 by 1 (by a human).

So '01'*22 rather than '01010101010101010101010101010101010101010101'

And also I would prefer a higher multiplication number rather than a low one.

'01'*22 is better than '0101'*11 which is better than '010101'*7 + '01'*1

Answer 1

This might work for most of the cases..

let largeArray = [1,1,1,0,1,1,0,1,1,0,1,1,0,1,0,0,1,0,1,1,0,1];
let maxSubSize = 5;//change this value! for chunk size.
document.getElementById("input").innerHTML = JSON.stringify(largeArray);
function patternMatch(a,b){
 if(a.length == b.length){
   let i;
   for(i=0; i< a.length;i++){
     if(a[i] != b[i])
       return false;
    }
   return true;
  } else {
    return false;
  }
}

function checkPattern(tArray,index,pattern){
 let score = 0;
 for(let i = index;i < tArray.length-pattern.length+1;i+= pattern.length){
  
     if( patternMatch(tArray.slice(i,i+pattern.length),pattern) )
         score++;
        else
         break;
    }
    return score;
}


function bakeResult(largeArray) {
  let result = [];
  for(let i = 0; i < largeArray.length;i++){
    let pattern = [];
    let bestScore = -1;
    let bestPattern;
    for(let j= i;j < i+maxSubSize;j++){
     pattern.push(largeArray[j]);
      let score = checkPattern(largeArray,j+1,pattern);
     if(score > bestScore) {
          bestPattern = pattern.slice(0);
          bestScore = score;
      }
    }

    i += (bestScore+1)*bestPattern.length-1;
    //console.log("start",tArray[i],i);
    result.push({pattern:bestPattern,count:bestScore+1})
  }
  return result;
}

function reverseResult(result){
  result = result.reverse();
  for(let i =0; i < result.length;i++){
    result[i].pattern = result[i].pattern.reverse();
  }
  return result;
}



function drawResult(result){
 for(let i= 0; i < result.length;i++){
     let tstr = "";
     let pattern = result[i].pattern;
        for(let j=0; j < pattern.length;j++){
          tstr += pattern[j]+"";
        }
       
        tstr += " - "+ result[i].count + " times";
        document.getElementById('result').innerHTML += "<button>"+tstr+"</button>"
    }
    //document.getElementById('result').innerHTML += "<hr>"
}
let result = bakeResult(largeArray);

tresult = bakeResult(largeArray.reverse());
tresult = reverseResult(tresult);
if(result.length < tresult.length){
  drawResult(result);
}else{
  drawResult(tresult);
}

body {
  background: white;
  color: #323232;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

img {
  width: 56px;
  height: 48px;
}

h1 {
  font-weight: 200;
  font-style: 26px;
  margin: 10px;
}

<div>
  <div id="input">
  </div>
  
  <h2>=</h2>
  <div id="result">

  </div>
</div>

This solution worked for the example cases...

Codepen Preview

Answer 2

You yould iterate the array/string from the end and store for each step the optimal solution. At last take the first item of the array.

This works with lage data as well.

function getChunks(data) {

    function same(position, size) {
        for (let i = 0; i < size; i++) {
            const right = offset + i + position * size;
            if (right >= data.length || data[offset + i] !== data[right]) return false;
        }
        return true;
    }

    function add(offset, patternSize, count) {
        let result = chunks[offset],
            temp = data.slice(offset, offset + patternSize) + '<' + count,
            product = patternSize * count,
            score = patternSize * ((count - 1) || 0.5),
            size = patternSize;

        if (offset + product < data.length) {
            let chunk = chunks[offset + product];
            score += chunk.score;
            temp += '|' + chunk.result;
            size += chunk.size;
        }

        if (!result) {
            chunks[offset] = { result: temp, score: 0.5, size };
            return;
        }
        if (result.score < score || result.score === score && size < result.size) {
            chunks[offset] = { result: temp, score, size };
        }
    }

    var chunks = [],
        offset = data.length;

    while (offset--) {
        let patternSize = data.length - offset + 1;

        while (--patternSize) {
            let count = 0;
            while (same(++count, patternSize)) add(offset, patternSize, count);
            add(offset, patternSize, count);
        }
    }
    return chunks[0].result;
}

console.log(getChunks('11101110111101111000010011110001100'));
console.log(getChunks('101101101101101101101'));
console.log(getChunks('1110110110110100101101'));

Answer 3

I found a way, to keep order, and make it more human-readable:

let bools = [0,0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,1,0,0,1,1,1,0,0,1,0];
bools.push('');

let res = document.getElementById("res");

let formatted = "";
let trueOrFalse = bools[0];
let counter = 1;
let substring = "";

bools.forEach((element, index) => {
  if (trueOrFalse !== element) {
    
   if (counter === 1) {
      substring = `<span style="color: ${
        trueOrFalse === 0 ? "red" : "blue"
      }">${trueOrFalse}*1</span> `;
   }
        
    trueOrFalse = element;
    counter = 1;
    formatted += substring;
  } else {
    counter++;
    substring = `<span style="color: ${
      trueOrFalse === 0 ? "red" : "blue"
    }">${trueOrFalse}*${counter}  </span> `;
  }
});

res.innerHTML = formatted;

<div id="res">Calculating...</div>

Also, created a codepen: https://codepen.io/IDONNHAVE/pen/pojmdMm

If you have any questions regarding the code, I'll help you out.

PS: please forgive my variable namings