CODEWITHSUNDEEP
javascriptarrays
user8568444
user8568444

Reputation:

Assign circular array to object

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

Upvotes: 1

Views: 74

Answers (3)

adeneo
adeneo

Reputation: 318182

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) )

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42044

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);

Upvotes: 0

brk
brk

Reputation: 50291

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)

Upvotes: 0

Related Questions