How would you guys do this mapping in JavaScript?

Let's say I have an array as follows:

[100,2,3,4,200,35,42,300,4,4,4,6,7,400,2]

And I want to create a map, like so:

{
{ key: 100,
value: 2
},
{ key: 100,
value: 3
}
{ key: 100,
value: 4
},
{ key: 200,
value: 35
},
{ key: 200,
value: 42
},
{ key: 300,
value: 4
},
{ key: 300,
value: 4
},
{ key: 300,
value: 4
},
{ key: 300,
value: 6
},
{ key: 300,
value: 7
},
{ key: 400,
value: 2
},
}

All the values in the bigger array are objects which have one or more fields.

I simulated the values with only one field using numbers 100, 200, 300, 400. You can call them flags. The rest of them being values with more than 1 field, of course.

My goal is to create map elements using the current flag with the items that follow it. For flag 300, the following elements are 4,4,4,6,7.

Here is what I tried:

let flagAndFollowingValues = new Map();
let j=0;
let followingElementsArray = [];
console.log(itemsToBeCheckedArray[j]);
for(let i=0; i<bigArray.length; i++){
if(Object.keys(bigArray[i]).length > 1)
{
followingElementsArray.push(bigArray[i]);
}else if(Object.keys(bigArray[i]).length === 1){
if(i===0){
j++;
flagAndFollowingValues.set(itemsToBeCheckedArray[j], followingElementsArray);
followingElementsArray=[];
}else{
flagAndFollowingValues.set(itemsToBeCheckedArray[j], followingElementsArray);
followingElementsArray=[];
}
}
}

Another reduce() option using a single flag instead of if/else/map's

1. If the current value if larger then 100, set flag to that value
2. Otherwise, add a new object to the array, with flag as key and the current value as the value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = [100,2,3,4,200,35,42,300,4,4,4,6,7,400,2];
let flag = null;
const result = data.reduce((p, c, i) => {
if (c >= 100) {
flag = c;
} else {
p.push({ key: flag, value: c });         
}
return p;
}, []);
console.log(result);

<!-- end snippet -->

You can reduce the data by adding new groups to the end of the resulting array.

1. Reduce the data
   1. If the value is a key, add it to the end of the accumulator
   2. Else, push the current value to the last group in the accumulator
2. Flat-map each group of values into a sub-array of values (with their key)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const
input = [100, 2, 3, 4, 200, 35, 42, 300, 4, 4, 4, 6, 7, 400, 2],
processData = (arr, keyPredicate) => arr
.reduce((acc, n) => {
if (keyPredicate(n)) acc.push({ key: n, values: [] });
else acc[acc.length - 1].values.push(n);
return acc;
}, [])
.flatMap(({ key, values }) => values.map(value => ({ key, value }))),
processed = processData(input, n => n >= 100);
console.log(processed);

<!-- language: lang-css -->

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

<!-- end snippet -->

First create a map logic, then filter out false entries:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Declare what your current key is, so we can save it when needed
let currentKey = 0;
// We just want to return the key and value
// But not if the number is divisable by 100
let result = [100,2,3,4,200,35,42,300,4,4,4,6,7,400,2].map(
number => {
// Check if key or value
if (number % 100 === 0){
currentKey = number
return false;
}
return {key: currentKey, value: number}
}
);
// Remove false keys
result = result.filter(entry => entry !== false)
console.log(result)

<!-- end snippet -->

Your proposed structure is useless, what you probably want is a map like

100 => [ 2, 3, 4 ]
200 => [ 35, 42 ]

etc

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let a = [100,2,3,4,200,35,42,300,4,4,4,6,7,400,2]
let m = new Map()
let key = null
for (let x of a)
if (x % 100 === 0)
key = x
else if (m.has(key))
m.get(key).push(x)
else
m.set(key, [x])
console.log([...m])

<!-- end snippet -->

If your flag is a multiple of 100, in that case it will work

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let flagObj = {};
const data = [100,2,3,4,200,35,42,300,4,4,4,6,7,400,2];
const res = data.reduce((acc, val, index)=> {
let flag = val % 100;
if(flag === 0 ){
flagObj[val] = val;
} else{
let allFlags = Object.keys(flagObj);
if(allFlags[allFlags.length-1]){
let key = allFlags[allFlags.length -1]
acc.push({
key,
value: val,
});
}
}
return acc;
},[]);
console.log('result>>>>>', res);

<!-- end snippet -->

If we had a splitWhenever function that split an array into subarrays of consecutive values based on the result of a predicate, we could write this simply as

const process = (xs) => 
  splitWhenever (n => n % 100 == 0) (xs) 
    .flatMap (([key, ...vals]) => vals .map (value => ({key, value})))

Such a splitWhenever is fairly generic and useful in other situations, and it might go in our personal toolkit to be reused as necessary. We might use it like this:

const isOdd = (n => n % 2 === 1)
splitWhenever (isOdd) ([5, 6, 8, 12, 3, 8, 10, 17, 24, 5, 7, 14, 28])
    //=> [[5, 6, 8, 12], [3, 8, 10], [17, 24], [5], [7, 14, 28]]

Or we might extend it to allow the predicate to check the current value against the previous one, like this:

const sameDecade = (x, y) => Math .floor (x / 10) !== Math .floor (y / 10) 
splitWhenever (sameDecade) ([23, 27, 22, 45, 42, 57, 51, 12, 16, 25, 27, 21])
    //=> [[23, 27, 22], [45, 42], [57, 51], [12, 16], [25, 27, 21]]

And of course such a function could be used like this:

// const isFlag = (n) => n > 99)
// const isFlag = (n) => [100, 200, 300, 400, 500, 1000] .includes (n)
const isFlag = (n) => n % 100 == 0
splitWhenever (isFlag) ([100, 2, 3, 4, 200, 35, 42, 300, 4, 4, 4, 6, 7, 400, 2])
    //=> [[100, 2, 3, 4], [200, 35, 42], [300, 4, 4, 4, 6, 7], [400, 2]]

(Note the various versions of isFlag. The question doesn't make it clear how you determine the flag values.)

I have such a splitWhenever I used fairly often. We can use it like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const splitWhenever = (pred) => (xs) =>
xs .length == 0 ? [] : xs .slice (1) .reduce (
((xss, x, i) => pred (x, xs[i]) 
? [...xss, [x]] 
: [...xss .slice (0, -1), [... xss [xss .length - 1], x]]
), [[xs [0]]]
)
const process = (xs) => 
splitWhenever (n => n % 100 == 0) (xs) 
.flatMap (([key, ...vals]) => vals .map (value => ({key, value})))
console .log (
process ([100, 2, 3, 4, 200, 35, 42, 300, 4, 4, 4, 6, 7, 400, 2])
)

<!-- language: lang-css -->

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

<!-- end snippet -->

You can use Array#forEach and Array#push methods as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const
input = [100,2,3,4,200,35,42,300,4,4,4,6,7,400,2],
output = [];
let      
key = 0;
input.forEach(value => {
if( value < 100 ) {
output.push({key, value});
} else {
key = value;
}
});
console.log( output );

<!-- end snippet -->

I guess the code is self-explanatory. Just iterate the array and either get a new key or add a value to the current key.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const source = [100,2,3,4,200,35,42,300,4,4,4,6,7,400,2];
const mapped = [];
let key;
for(const value of source){
if(value % 100 === 0){
key = value;
continue;
}
mapped.push({key,value});
}
console.log(mapped);

<!-- end snippet -->