The last item is being pushed to Array (Javascript)

Question

Hi I have below code in my project. The problem is the last item is being pushed to an array instead of each item.

JS Function

function getArrayObjForKeys(keys, source, desiredKeys) {
  let arrayObj = [],
    obj = {};
  source.forEach(function(val, ind) {
    keys.forEach(function(v, i) {
      (function(v) {
        if (val.hasOwnProperty(v)) {
          let desKey = desiredKeys[i];
          obj[desKey] = val[v];
        }
      }).call(this, v);
    });
    arrayObj.push(obj);
  });
  return arrayObj;
}

// Invoking function as below
// **************************

var source = [{
  'country': 'USA',
  'descr': 'United States'
}, {
  'country': 'UK',
  'descr': 'United Kingdom'
}];
var countryList = getArrayObjForKeys(['country', 'descr'], source, ['value', 'label']);
console.info(countryList);

Desired Output

[{'value':'USA','label':'United States'},{'value':'UK','label':'United Kingdom'}]

Plunker

https://next.plnkr.co/edit/3SKbaJo9r5QX8hex?open=lib%2Fscript.js

Nick Parsons · Accepted Answer · 2019-02-06 10:35:29Z

2

Your issue is that you're referring to the same obj in memory and thus modifying both objects. A quick fix to this is to move your object declaration into the foreach loop, so you have your own unique reference to each object (not the same).

See working example below:

function getArrayObjForKeys(keys, source, desiredKeys) {
  let arrayObj = []
  
  source.forEach(function(val, ind) {
    let obj = {}; /* Move into foreach */
    keys.forEach(function(v, i) {
      (function(v) {
        if (val.hasOwnProperty(v)) {
          let desKey = desiredKeys[i];
          obj[desKey] = val[v];
        }
      }).call(this, v);
    });
    arrayObj.push(obj);
  });
  return arrayObj;
}


var source = [{
  'country': 'USA',
  'descr': 'United States'
}, {
  'country': 'UK',
  'descr': 'United Kingdom'
}];

var countryList = getArrayObjForKeys(['country', 'descr'], source, ['value', 'label']);
console.info(countryList);

answered Feb 6, 2019 at 10:35

Nick Parsons

51.7k6 gold badges62 silver badges80 bronze badges

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

1 Comment

Nick Parsons Over a year ago

@ukb awesome! no worries :)

HMR · Accepted Answer · 2019-02-06 10:40:24Z

1

You can map the source to the desired output using reduce to reduce the keys, desiredKeys and object to a new object:

function getArrayObjForKeys(keys, source, desiredKeys) {
    return source.map(function(obj) {
        return keys.reduce(function(result, key, index) {
            result[desiredKeys[index]] = obj[key];
            return result;
        }, {});
    });
}

var source = [{ country: 'USA', descr: 'United States' }, { country: 'UK', descr: 'United Kingdom' }];
var countryList = getArrayObjForKeys(['country', 'descr'], source, ['value', 'label']);
console.info(countryList);

answered Feb 6, 2019 at 10:40

HMR

39.5k26 gold badges99 silver badges176 bronze badges

Comments

jo_va · Accepted Answer · 2019-02-06 10:43:30Z

0

Here is another way to do it, using reduce, Object.entries and map:

function getArrayObjForKeys(keys, source, desiredKeys) {
  return source.map(obj => Object.entries(obj).reduce((accum, [key, val]) => {
    const keyIdx = keys.indexOf(key);
    accum[desiredKeys[keyIdx]] = val;
    return accum;
  }, {}));
}

const source = [
  { 'country': 'USA', 'descr': 'United States' },
  { 'country': 'UK', 'descr': 'United Kingdom' }
];

const countryList = getArrayObjForKeys(['country', 'descr'], source, ['value', 'label']);

console.info(countryList);

answered Feb 6, 2019 at 10:43

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

2 Comments

HMR Over a year ago

Object.entries is not to be guaranteed to come in any particular order so you should not use it in this way.

jo_va Over a year ago

Well, in this case it is not a problem since we are outputting an object from the reduce function, and keys are not guaranteed to be ordered in an object either. So the input is unordered, you are right, but the output does not rely on the input being ordered.

Jeremy Thille · Accepted Answer · 2019-02-06 10:44:09Z

0

A more concise alternative, using ES6 (and provided both input arrays always have the same length) would be :

const getArrayObjForKeys = (keys, source, desiredKeys) => source.map( obj => {
	let output = {};
	keys.forEach( (key,i) => output[desiredKeys[i]] = obj[keys[i]]);
	return output;
})
 

const source = [{'country':'USA','descr':'United States'},{'country':'UK','descr':'United Kingdom'}],
	  countryList = getArrayObjForKeys(['country','descr'], source, ['value','label']);

console.info(countryList);

answered Feb 6, 2019 at 10:44

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Comments

Mahesh Kumar Maisa · Accepted Answer · 2019-02-06 10:44:32Z

0

getArrayObjForKeys(keys,source,desiredKeys){
    let arrayObj=[];
    source.forEach(function(val,ind){
    let obj={};
        keys.forEach(function(v,i){
          (function(v){
            if(val.hasOwnProperty(v)){
              let desKey = desiredKeys[i];
              obj[desKey] = val[v];
            }
          }).call(this, v);
        });
        arrayObj.push(obj);
    });
    return arrayObj;
  }

Update the obj variable inside the foreach loop.

Issue is with obj variable

answered Feb 6, 2019 at 10:44

Mahesh Kumar Maisa

314 bronze badges

Comments

Anuga · Accepted Answer · 2019-02-06 10:47:25Z

0

If you want less code, here's a more specific function.

function easy(obj) {
  return obj = obj.map(obj => {
    return {"value": obj.country, "lable": obj.descr};
  });
}

obj = [{
  "country": "USA",
  "descr": "United States"
}, {
  "country": "UK",
  "descr": "United Kingdom"
}];

obj = easy(obj);

console.log(obj);

answered Feb 6, 2019 at 10:47

Anuga

2,8271 gold badge22 silver badges30 bronze badges

Collectives™ on Stack Overflow

The last item is being pushed to Array (Javascript)

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related