How to map Multiple object data in a Single object using Javascript? - Stack Overflow

admin管理员组

文章数量:1392003

var sourceA = [{ pid: 1, data_a: 23, data_x: 23},{ pid: 2, data_a: 23 ,data_x: 23}];

var sourceB = [{ pid: 1, data_a: 34, data_x: 34 },{ pid: 2, data_a: 34, data_x: 34 }];

var sourceC = [{ pid: 1, data_a: 35, data_x: 34 },{ pid: 2, data_a: 35, data_x: 34 }];

var sourceA = [{ pid: 1, data_a: 23, data_x: 23},{ pid: 2, data_a: 23 ,data_x: 23}];

var sourceB = [{ pid: 1, data_a: 34, data_x: 34 },{ pid: 2, data_a: 34, data_x: 34 }];

var sourceC = [{ pid: 1, data_a: 35, data_x: 34 },{ pid: 2, data_a: 35, data_x: 34 }];

I am getting following data from multiple source. In those object there is a field PID which one is mon. So , I want to bined it according to PID.

Expected output :

var p = [{
  "pid": 1,
  "array": [{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30}]
},{
  "pid": 2,
  "array": [{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30}]
}]

I tried with following

 var result = sourceA.map((obj, index) => Object.assign({}, sourceA[index], sourceB[index], sourceC[index]));

But I am not getting what I expected. then I tried with How to group array of objects by key But My source is 3 not 1.

• javascript
• object
• vuejs2

Share Improve this question Follow edited Sep 28, 2017 at 11:50 pskkar 44211 gold badge44 silver badges1818 bronze badges asked Sep 28, 2017 at 10:35 ParkarParkar 3,04633 gold badges1717 silver badges2424 bronze badges 5

• Possible duplicate of How to group array of objects by key – Rajesh Commented Sep 28, 2017 at 10:38
• var result = sourceA.map((obj, index) => Object.assign({}, sourceA[index], sourceB[index], sourceC[index])); – Parkar Commented Sep 28, 2017 at 10:39
• When someone requests for more information, please add this information in question. Comments can get collapsed. – Rajesh Commented Sep 28, 2017 at 10:40
• @Sharat did any of the solutions solve your issue? – Brett DeWoody Commented Sep 29, 2017 at 12:37
• Just fixed it. Thanks everyone. – Parkar Commented Sep 29, 2017 at 12:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

var p = [{
  "pid": 1,
  "array": [{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30}]
},{
  "pid": 2,
  "array": [{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30},{"data_a": 33,"data_x": 30}]
}]

As it is not clear from your question were from we could get "33" and "30" values i assume you made a typo, and expected result should be like this:

var p = [{
  "pid": 1,
  "array": [{"data_a": 23,"data_x": 23},{"data_a": 34,"data_x": 34},{"data_a": 35,"data_x": 34}]
},{
  "pid": 2,
  "array": [{"data_a": 23,"data_x": 23},{"data_a": 34,"data_x": 34},{"data_a": 35,"data_x": 34}]
}]

considering the above you may try to use few loops to group data by pid and then format it as expected

var sourceA = [{ pid: 1, data_a: 23, data_x: 23},{ pid: 2, data_a: 23 ,data_x: 23}];
var sourceB = [{ pid: 1, data_a: 34, data_x: 34 },{ pid: 2, data_a: 34, data_x: 34 }];
var sourceC = [{ pid: 1, data_a: 35, data_x: 34 },{ pid: 2, data_a: 35, data_x: 34 }];

function bineInputs(...inputs) {

  var bined = {};
  for (var i = 0; i< inputs.length; i++) {
    for (var j = 0; j < inputs[i].length; j++) {
      var record = inputs[i][j];

      if (!bined[record.pid]) {
        bined[record.pid] = []
      }
      var tmp = Object.assign({}, record);
      delete tmp.pid;
      bined[record.pid].push(tmp);
    }
  }

  var result = [];
  for (var key in bined) {
    if (bined.hasOwnProperty(key)) {
      result.push({
        pid: key,
        array: bined[key]
      });
    }
  }

  return result;
}

var expected = bineInputs(sourceA, sourceB, sourceC);
console.log(expected);

Result should look like expected. Probably this is not the best solution, but it works

If the data is always structured as an object like:

{
  pid,
  data_a,
  data_b,
  ...
  data_x
}

we can do the following:

var sourceA = [{pid: 1, data_a: 23, data_x: 23}, {pid: 2, data_a: 23, data_x: 23}];
var sourceB = [{pid: 1, data_a: 34, data_x: 34}, {pid: 2, data_a: 34, data_x: 34}];
var sourceC = [{pid: 1, data_a: 35, data_x: 34}, {pid: 2, data_a: 35, data_x: 34}];

var bineSources = function(sources) {
  var bined = sources.reduce((result, source) => {

    source.forEach(el => {
      var pid = el.pid;
      delete el.pid;

      result[pid] = result[pid] || {pid: pid, array: []}

      result[pid].array.push(el);
    });

    return result;
  }, []);

  return bined.filter(Boolean);
};

console.log(bineSources([sourceA, sourceB, sourceC]));

One advantage to this method is it works for any number of pid and data_N properties.

The result is:

[
  {
    "pid": 1,
    "array": [{"data_a": 23, "data_x": 23}, {"data_a": 34, "data_x": 34}, {"data_a": 35, "data_x": 34}]
  },
  {
    "pid": 2,
    "array": [{"data_a": 23,"data_x": 23}, {"data_a": 34, "data_x": 34}, {"data_a": 35, "data_x": 34}]
  }
]

I used a Map as temporary structure:

var sourceA = [{ pid: 1, data_a: 23, data_x: 23},{ pid: 2, data_a: 23 ,data_x: 23}];

var sourceB = [{ pid: 1, data_a: 34, data_x: 34 },{ pid: 2, data_a: 34, data_x: 34 }];

var sourceC = [{ pid: 1, data_a: 35, data_x: 34 },{ pid: 2, data_a: 35, data_x: 34 }];

const myMap = new Map();

function analyzeSource(source) {
    for(obj of source) {
        if(myMap.has(obj.pid)) {
            var tmpArr = myMap.get(obj.pid);
            tmpArr.push({data_a: obj.data_a, data_x: obj.data_x});
            myMap.set(obj.pid, tmpArr);
        }
        else {
            var newArr = new Array();
            newArr.push({data_a: obj.data_a, data_x: obj.data_x});
            myMap.set(obj.pid, newArr);
        }
    }
}

analyzeSource(sourceA);
analyzeSource(sourceB);
analyzeSource(sourceC);

function fromMyMapToArr() {
    var outArr = new Array();
    for (var entry of myMap) {
        outArr.push({pid: entry[0], array: entry[1]});
    }

    return outArr;
}

var outArr = fromMyMapToArr();
console.log(outArr);

Try this:

    var sourceA = [{ pid: 1, data_a: 23, data_x: 23},{ pid: 2, data_a: 23 ,data_x: 23}];
    var sourceB = [{ pid: 1, data_a: 34, data_x: 34 },{ pid: 2, data_a: 34, data_x: 34 }];
    var sourceC = [{ pid: 1, data_a: 35, data_x: 34 },{ pid: 2, data_a: 35, data_x: 34 }];

    var mergedArrays = sourceA.concat(sourceB).concat(sourceC);

    Array.prototype.groupBy = function(prop) {
        return this.reduce(function(groups, item) {
            var val = item[prop];
            groups[val] = groups[val] || [];
            groups[val].push(item);
            return groups;
        }, {});
    }

    var groupByResult = mergedArrays.groupBy('pid'); 
    var result = [];
    for(pid in groupByResult){
        var obj = {};
        obj.pid = pid;
        obj.array = groupByResult[pid].map(function(obj){ delete obj.pid; return obj});
        result.push(obj);
    }
    console.log(JSON.stringify(result));

本文标签： How to map Multiple object data in a Single object using JavascriptStack Overflow