Assign circular array to object

Question

I'm a fresher to java-script. I created a object and with key value pairs. Newly I need to add another key (color) with value which should be from color array (color[]). If the object size is greater than color array size, then the value for the color key should be assigned from beginning of color array

var sumArray=[{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color=["#FF0F00","#FF6600","#FF9E01"];


var combinedObj =sumArray.map(function(obj) {
    var me = Object.assign({}, obj);
      var i=0;    
      me.color = color[i++];
    return me;
});

Output is

[{"sum":1,"color":"#FF0F00"},{"sum":2,"color":"#FF0F00"},
{"sum":3,"color":"#FF0F00"},{"sum":4,"color":"#FF0F00"},
{"sum":5,"color":"#FF0F00"},{"sum":6,"color":"#FF0F00"}]

Expected Output is

[{"sum":1,"color":"#FF0F00"},{"sum":2,"color":"#FF6600"},
{"sum":3,"color":"#FF9E01"},{"sum":4,"color":"#FF0F00"},
{"sum":5,"color":"#FF6600"},{"sum":6,"color":"#FF9E01"}]

The value is circulating from the beginning if the object size is greater than color array size.

I tried my best by referring. But failed. Thanks in advance

adeneo · Accepted Answer · 2017-09-09 17:50:25Z

2

You want to define the iterator outside the loop, and reset it to zero, when it gets to the smallest arrays length

var sumArray = [{"sum": 1}, {"sum": 2}, {"sum": 3}, {"sum": 4}, {"sum": 5}, {"sum": 6}]
var color    = ["#FF0F00", "#FF6600", "#FF9E01"];

var i = 0;

var combinedObj = sumArray.map(function(obj) {
  var me = Object.assign({}, obj);
  i = i === color.length ? 0 : i;
  me.color = color[i++];
  return me;
});

console.log( JSON.stringify( combinedObj, 0, 4 ) )

You could just reduce the array instead

var sumArray = [{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color    = ["#FF0F00","#FF6600","#FF9E01"];

var combinedObj = sumArray.reduce( (a,b,i) => 
  (a.push(Object.assign({}, b, {color:color[i%color.length]})), a)
, []);

console.log( JSON.stringify(combinedObj, 0, 4) )

edited Sep 9, 2017 at 17:50

answered Sep 9, 2017 at 17:40

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

gaetanoM · Accepted Answer · 2017-09-09 17:44:10Z

Your issue is in this line:

var i=0;

move it out of the loop, and in the loop the increment must be:

 i = (i + 1) % color.length;

var sumArray=[{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color=["#FF0F00","#FF6600","#FF9E01"];


var i=0;
var combinedObj = sumArray.map(function(obj) {
    var me = Object.assign({}, obj);
    me.color = color[i];
    i = (i + 1) % color.length;
    return me;
});
console.log(combinedObj);

A different approach, avoiding global variables, can be based on second map parameter:

var sumArray=[{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color=["#FF0F00","#FF6600","#FF9E01"];


var combinedObj = sumArray.map(function(obj, idx) {
    var me = Object.assign({}, obj);
    me.color = color[idx % color.length];
    return me;
});
console.log(combinedObj);

brk · Accepted Answer · 2017-09-09 17:43:29Z

0

Just check if i value is 3, then assign it back to 0

var sumArray = [{
  "sum": 1
}, {
  "sum": 2
}, {
  "sum": 3
}, {
  "sum": 4
}, {
  "sum": 5
}, {
  "sum": 6
}]
var color = ["#FF0F00", "#FF6600", "#FF9E01"];

var i = 0;
var combinedObj = sumArray.map(function(obj) {

  obj.color = color[i];
  i++;
  if (i === 3) {
    i = 0;
  }
  return obj

}, {});
console.log(combinedObj)

answered Sep 9, 2017 at 17:43

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

Assign circular array to object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related