This is my approach. We iterate over our array, keeping track of our current value - and substracting from it as we push out each element to the output array.

There is 3 cases:

1. either our current count is >= input, so we just push and move on,
2. current count is 0, so we just push everything left
3. current count is < input, but more than 0 - in this case we split.

Here is the code:

function transform(input, array) {
    const total = array.reduce((previous, current) => previous + current);
    // It wasn't specified what should happen when the input > total, so we will just throw an error.
    if (input > total) {
        throw new Error('Input cannot be bigger than the sum of elements in the array.');
    }

    let current = input;
    let result = [];

    for (let i = 0; i < array.length; i++) {
        if (current >= array[i]) {
            result.push(array[i]);
            current -= array[i];
        } else if (current === 0) {
            result.push(array[i]);
        } else {
            result.push(current, array[i] - current);
            current = 0;
        }
    }

    return result;
}

Some of these answers are a bit overcomplicated. If you use a recursive function, you can do this in just two lines of code.

const pie_values = [20,10,5,5,10];

// The challenge is to transform the above array based on integer input.
// (5) => [5, 15, 10, 5, 5, 10]
// (21) => [20, 1, 9, 5, 5, 10]
// (31) => [20, 10, 1, 4, 5, 10]

function reshape(num, vals) {
    if (num < vals[0]) return [num, vals[0] - num, ...vals.slice(1)];
    return [vals[0], ...reshape(num - vals[0], vals.slice(1))];
}

console.log(reshape(5, pie_values))
console.log(reshape(21, pie_values))
console.log(reshape(31, pie_values))

The key is realizing that if the amount you need to take is less than the next value, then you can take it from that next value and the remainder of the array will stay the same.

But if you need to take more than what's available, take as much as you can get from the first value, and then take that much less from the remainder of the array.

EDIT: Note that if the number you give is larger than the sum of all the pie values, this will recurse infinitely (leading to a stack overflow). To be totally safe, you should ensure that the value is less than the total sum before calling reshape.

You want something like that ? (Works with the examples you've given)

    function getPieValues(integer_input) {
        "use strict";
        let final_arr = pie_values,
            array_sum = pie_values.reduce((pv, cv) =>  pv + cv , 0);

        if(integer_input !== 0 && integer_input !== array_sum) { // For the cases 50 and 0, the array won't be modified
            for(let i = 0; i < pie_values.length; i++) {
                if(pie_values[i] < integer_input) { // if the prompted number is bigger than the current value, we keep up
                    integer_input -= pie_values[i];

                } else { // When it becomes smaller, we add the remainder at the front of the current value, then we modify the next value, and finally we break it so that it doesn't happen next
                    final_arr.splice(i, 0, integer_input);
                    final_arr[i+1] -= integer_input;
                    break;
                }
            }

        }
        return final_arr;
    }

Edit : Made it a function, and made it work with 0 and 50 (sorry, first post ;-) )

This one's pretty simple and efficient. It doesn't iterate the whole array, only up to the point it needs to.

const pie_values = [20,10,5,5,10];

function pied(n) {
  var i = 0;
  var total = pie_values[0];

  while (total < n && i < pie_values.length) {
    i++;
    total += pie_values[i];
  }

  if (i < pie_values.length) {
    var diff = total - n;
    if (diff > 0 && n > 0) { 
      return [].concat(
      	pie_values.slice(0, i), // the part of the array up to i
        pie_values[i] - diff, // the amount we used of the last element we needed
        diff, // the amount left over
        pie_values.slice(i + 1) // the rest of the array after i
      );
    } else {
      // just return a copy of the original array
      return pie_values.slice();
    }
  } else {
    // n was greater than the total of all elements of the array
    return "went over";
  }
}

console.log(pied(5));

Using vanilla Javascript for-loop

Look at this code snippet

const pie_values = [20, 10, 5, 5, 10];

var fn = (input) => {
  let array = [];
  for (var i = 0; i < pie_values.length; i++) {
    var n = pie_values[i];
    let calc = n - input;
    if (calc > 0) {
      array.push(n - calc); // Push how many used, i.e n = 20, input = 10.
      array.push(calc); // Push the remaining after subtraction.
      array = array.concat(pie_values.slice(i + 1)); // Add the remaining values from 'pie_values'
      return array;
    } else {
      array.push(n); // Push all this number because was insufficient, i.e n = 20, input = 30
      input = Math.abs(calc); // Remaining for the next iteration.
    }
  }

  return array;
};

console.log(fn(5));
console.log(fn(21));
console.log(fn(31));
console.log(fn(0));
console.log(fn(50));

const pie_values = [20,10,5,5,10];

function rebaseArr(input){
  var retArr = [];
  var total = 0;
  let isDone = false;
  for(var i in pie_values){
    let currentVal = pie_values[i];
    total += currentVal;
    if(total > input && !isDone){
      let rem = total - input;
      let rem1 = currentVal - rem;
      rem1 !== 0 ? retArr.push(rem1) : 0;
      retArr.push(rem);
      isDone = true;
    } else {
      retArr.push(currentVal);
    }
  }
  return retArr;
}

console.log(rebaseArr(31));
console.log(rebaseArr(1));
console.log(rebaseArr(10));

Can you please try with above code. Hope it helps :)

I wouldn't normally advise recursion in JS however just for fun you may implement an Haskellesque pattern matching by using spread and rest operators through destructuring and may come up with something like below;

It wasn't clear to me what to do when the difference is zero so being a remarkably lazy person i choose to do nothing. (Last test won't return [20,10,5,0,5,10])

var extend = ([x,...xs],n) => n && x ? x > n ? [n, x-n, ...xs]
                                             : [x, ...extend(xs, n-x)]
                                     : [x,...xs],
    pvs    = [20,10,5,5,10];

console.log(extend(pvs,5));
console.log(extend(pvs,21));
console.log(extend(pvs,31));
console.log(extend(pvs,35));

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