Combining JSON Objects in a Formatted Manner

Question

Combining JSON Objects in a Formatted Manner

I'm working with two variables:

var parentData: [{
  "ID": "869",
  "Name": "John"
}, {
  "ID": "800",
  "Name": "Jane"
}]
var Cost = [{
  "Number": "869",
  "Amount": 100
}, {
  "Number": "800",
  "Amount": 200
}, {
  "Number": "800",
  "Amount": 560
}]

I wish to achieve the following updated result:
{
  "parentData": [{
      "ID": "869",
      "Name": "John",
      "Costs": [{
          "Number": "869",
          "Amount": 100
        },
        {
          "Number": "869",
          "Amount": 200
        },
        {
          "NO": "869",
          "Amount": 560
        }
      ]
    },
    {
      "ID": "800",
      "Name": "Mary",
      "Costs": [{
          "Number": "800",
          "Amount": 100
        },
        {
          "Number": "800",
          "Amount": 200
        },
        {
          "Number": "800",
          "Amount": 560
        }
      ]
    }
  ]
}

Any suggestions on how to accomplish this?

javascript angularjs

Answer 1

Answer №1

One way to efficiently store the reference to multiple parent elements is by using a hash table.

var parents = [{ ID: "869", Name: "John" }, { ID: "800", Name: "Jane" }],
    costs = [{ ID: "869", Amount: 100 }, { ID: "800", Amount: 200 }, { ID: "800", Amount: 560 }],
    hashTable = Object.create(null),
    output = { Parents: parents.map(function (parent) { return hashTable[parent.ID] = parent; }) };

costs.forEach(function (cost) {
    (hashTable[cost.ID].Costs = hashTable[cost.ID].Costs || []).push(cost);
});

console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

One way to efficiently store the reference to multiple parent elements is by using a hash table.

var parents = [{ ID: "869", Name: "John" }, { ID: "800", Name: "Jane" }],
    costs = [{ ID: "869", Amount: 100 }, { ID: "800", Amount: 200 }, { ID: "800", Amount: 560 }],
    hashTable = Object.create(null),
    output = { Parents: parents.map(function (parent) { return hashTable[parent.ID] = parent; }) };

costs.forEach(function (cost) {
    (hashTable[cost.ID].Costs = hashTable[cost.ID].Costs || []).push(cost);
});

console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

I hope this solution meets your needs.

angular.module("app", []).controller("myCtrl", function($scope) {
  $scope.parent = [{
    "SNO": "869",
    "Name": "ABC"
  }, {
    "SNO": "800",
    "Name": "CCC"
  }];

  $scope.Cost = [{
    "NO": "869",
    "Amnt": 100
  }, {
    "NO": "800",
    "Amnt": 200
  }, {
    "NO": "800",
    "Amnt": 560
  }];

  $scope.mergeArr = function(arr1, arr2) {
    var arrTmp = [];
    if (Array.isArray(arr1)) {
      arrTmp.push(...arr1);
    } else {
      arrTmp.push(arr1);
    }

    arrTmp.forEach(function(item) {
      var costArr = arr2.filter(function(item2) {
        return item2.NO === item.SNO;
      });

      if (costArr.length > 0) {
        if (!item.COST) {
          item["COST"] = [];
        }

        costArr.forEach(function(cost) {
          item.COST.push(cost);
        })
      }
    });
    console.log(arrTmp);
    return {
      "Parent": arrTmp
    };
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div>
    <ui>
      <li ng-repeat="project in mergeArr(parent, Cost).Parent">
        {{project.SNO}} - {{project.Name}}
      </li>
    </ui>
  </div>
</div>

Answer 4

I hope this solution meets your needs.

angular.module("app", []).controller("myCtrl", function($scope) {
  $scope.parent = [{
    "SNO": "869",
    "Name": "ABC"
  }, {
    "SNO": "800",
    "Name": "CCC"
  }];

  $scope.Cost = [{
    "NO": "869",
    "Amnt": 100
  }, {
    "NO": "800",
    "Amnt": 200
  }, {
    "NO": "800",
    "Amnt": 560
  }];

  $scope.mergeArr = function(arr1, arr2) {
    var arrTmp = [];
    if (Array.isArray(arr1)) {
      arrTmp.push(...arr1);
    } else {
      arrTmp.push(arr1);
    }

    arrTmp.forEach(function(item) {
      var costArr = arr2.filter(function(item2) {
        return item2.NO === item.SNO;
      });

      if (costArr.length > 0) {
        if (!item.COST) {
          item["COST"] = [];
        }

        costArr.forEach(function(cost) {
          item.COST.push(cost);
        })
      }
    });
    console.log(arrTmp);
    return {
      "Parent": arrTmp
    };
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div>
    <ui>
      <li ng-repeat="project in mergeArr(parent, Cost).Parent">
        {{project.SNO}} - {{project.Name}}
      </li>
    </ui>
  </div>
</div>

Combining JSON Objects in a Formatted Manner

Answer №1

Answer №2

Similar questions

Exporting a class from an index.ts file may result in a problem where the injected constructor is

What could be causing my Dojo Pie chart to vanish when I trigger the updateSeries function following an Ajax request?

What is the purpose of including production dependencies in the package.json file of a React/Redux frontend project?

Holding off on triggering a jQuery Ajax request until a function returns a value

What is the best way to avoid duplicating this JQM function multiple times and instead reuse it efficiently?

Filtering an array of JSONs in Vue.js using a separate array of JSONs

Every time I attempt to compile NodeJS, I encounter a compilation error

Is it possible to retrieve the createdAt timestamp without displaying the 'GMT+0000 (Coordinated Universal Time)'?

Ways to complete a progress bar up to 100% based on the user's specified time

Mongoose Filtering in Rest API: A Comprehensive Guide

Adding various react elements to a list with the click of a button: A step-by-step guide

Querying two MongoDB collections simultaneously to locate a user based on their email address

Reloading the table columns in a JSP page with a click of the refresh button on every row using AJAX and JavaScript

"XMLHttpRequest 206 Partial Content: Understanding the Importance of Partial

Encountering a getMacChromiumEdgeDriverArchitecture error while using wdio/selenium-standalone-service

What is the best way to optimize a search for objects with extensive field arrays?

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Ways to inspect a number within a span and adjust its color depending on the value?

Tips for Enhancing Window Leveling (Brightness and Contrast)

Retrieve data from the MySQL database based on the search input field and dynamically update the options in the