JSFiddle - React, Tailwind, and code Playground

JavaScript

var colors = {"COLORS": [[1,'red'],[7,'green'],[2,'yellow'],[3,'orange']]},
    fruits = {"FRUITS": [[6,'mango'],[1,'apple'],[2,'banana'],[3,'orange'],[5,'purple']]},
    newFruits = {"NEW_FRUITS": []},
    compareKey = function (a, b) {return a[0] - b[0];},
    i = 0,
    j = 0;

colors = colors.COLORS.sort(compareKey);
fruits = fruits.FRUITS.sort(compareKey);

while (true) {
    var color = i < colors.length ? colors[i] : null;
    var fruit = j < fruits.length ? fruits[j] : null;
    if (color === null && fruit === null) {
        break;
    }
    if (color !== null && fruit == null || color[0] < fruits[0]) {
        newFruits.NEW_FRUITS.push([color[0], color[1], null]); i++;
    } else if (color === null && fruit !== null || color[0] > fruit[0]) {
        newFruits.NEW_FRUITS.push([fruit[0], null, fruit[1]]); j++;
    } else {
        newFruits.NEW_FRUITS.push([color[0], color[1], fruit[1]]); i++; j++;
    }  
}

alert(JSON.stringify(newFruits));