Create conditional object dynamically using JavaScript

Question

I am trying to create an object based on the contents of another object. I have an object that contains the following key/values:

var inputObject = {
    "color": [
        "black",
        "red",
        "green"
    ],
    "bottom": [
        "A",
        "B",
        "C",
        "D",
    ],
    "top": [
        "L",
        "M"
    ]
    }

I would like to modify this object so that it creates a dynamic number of keys. Here is my intended output:

var outputObject = {

    "blackBottom": [
        "A",
        "B",
        "C",
        "D",
    ],
    "redBottom": [
        "A",
        "B",
        "C",
        "D",
    ],
    "greenBottom": [
        "A",
        "B",
        "C",
        "D",
    ],
    "blackTop": [
        "L",
        "M"
    ],
    "redTop": [
        "L",
        "M"
    ],
    "greenTop": [
        "L",
        "M"
    ]
}

Where the following conditions are met:

Should there be no colors inside the "color" key, or the "color" key not exist, then create all 4 "color" + "Bottom" and "Top"
Should there be only one color inside the "color" object, then only create that "color" + "Bottom" and "Top"
Should there be only no entries in "Bottom", then only create the "color" + "Bottom"

How do I create the outputObject?

What have you tried? Where is your problem. Just a reminder, people here really don't like doing your homework... — Ramzi Khahil
– Ramzi Khahil, Commented Aug 23, 2017 at 14:38

black_sheep07 · Accepted Answer · 2017-08-23 17:04:12Z

3

Iterate over each color and fill resulting object using reduce

// The ES6 version, with the flexibility requested

const generate = ({color: colors, bottom, top}) => 
   colors.reduce(
     (acc, color) => Object.assign(acc, 
       bottom && {[`${color}Bottom`]: [...bottom]},
       top && {[`${color}Top`]: [...top]}
       ), 
     {})

// The ES5 version

function generateOldGoodES5(input) {
   // extract values from input w/o destructuring
   var colors = input.color,
       bottom = input.bottom,
       top = input.top;

   return colors.reduce(function(out, color){
     // assign corresponding properties
     out[color + 'Bottom'] = bottom.slice(); // copy array
     out[color + 'Top'] = top.slice(); // copy array

     return out
   }, {});

}

var inputObject = {
    "color": [
        "black",
        "red",
        "green"
    ],
    "bottom": [
        "A",
        "B",
        "C",
        "D",
    ],
    "top": [
        "L",
        "M"
    ]
    }
    
console.log("ES6 Output")
console.log(generate(inputObject))

console.log("ES5 Output")
console.log(generateOldGoodES5(inputObject))

edited Aug 23, 2017 at 17:04

black_sheep07

2,3683 gold badges29 silver badges40 bronze badges

answered Aug 23, 2017 at 14:41

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jonas Wilms Over a year ago

Nice use of ES6! However, i dont think the OP will understand without an explanation...

Yury Tarabanko Over a year ago

@Jonasw ES5 version added with some comments.

black_sheep07 Over a year ago

I like the ES6 version, however it only works when all "color", "top", and "bottom" exist. Is there any way that the solution works when either "top" or "bottom" do not exist?

Jonas Wilms Over a year ago

@black_sheep07 in the func parameters, you can use bottom = [], top = [] to make it work.

Yury Tarabanko Over a year ago

@black_sheep07 You could do it like this Object.assign(acc, top && {[${color}Top]: [...top]}, bottom &&/*same here*/}

NatNgs · Accepted Answer · 2017-08-23 14:40:47Z

0

You can add informations dynamically to your outputObject dynamically just like this:

var outputObject = {
   // unconditional things
   exampleUnconditional: [
      "someValue"
   ]
};

if(inputObject. /* your condition here */) {
    outputObject.exampleConditional = [
        "someContent"
    ] 
};

And so as result, outputObject will be like:

{
    exampleUnconditional: [
       "someValue"
    ],
    exampleConditional: [
        "someContent"
    ]
}

answered Aug 23, 2017 at 14:40

NatNgs

87414 silver badges27 bronze badges

Collectives™ on Stack Overflow

Create conditional object dynamically using JavaScript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related