Selecting a specific JSON object to generate numerous arrays

Question

Selecting a specific JSON object to generate numerous arrays

Within my JSON array are thirty objects representing the last 30 days, including today. Each object contains specific properties:

{
    "date": "2013-05-20",
    "notCachedRequestsDevelopment": "115482",
    "cachedRequestsDevelopment": "4732914",
    "notCachedBandwidthDevelopment": "15525231867",
    "cachedBandwidthDevelopment": "2571078929",
    "rejectRequestsDevelopment": "44068",
    "rejectBandwidthDevelopment": "23169212",
    "nonCSSCachedRequestsDevelopment": "6789",
    "nonCSSNotCachedRequestsDevelopment": "1440",
    "notCachedRequestsProduction": "9",
    "cachedRequestsProduction": "1089270",
    "notCachedBandwidthProduction": "2186497",
    "cachedBandwidthProduction": "616508357",
    "rejectRequestsProduction": "359",
    "rejectBandwidthProduction": "168977",
    "nonCSSCachedRequestsProduction": "0",
    "CDNCachedRequests": 6062986,
    "CDNNotCachedRequests": "272901.0",
    "CDNRejectRequests": "84764.0",
    "CDNAllBandwidth": 56006050473.574,
    "billingBandwidth": 22525362831.36,
    "billingHits": 6489103
}

My goal is to create new Arrays based on this JSON data. For instance:

I require a new array named totalBandwidth that sums up the following properties from each JSON object:

notCachedBandwidthDevelopment + cachedBandwidthDevelopment + rejectBandwidthDevelopment + notCachedBandwidthProduction + cachedBandwidthProduction + rejectBandwidthProduction

Another array, developmentBandwidth, should calculate the total by adding these values from each object:

cachedBandwidthDevelopment + notCachedBandwidthDevelopment

… and so forth.

While I can accomplish this task using a for loop for each new array, I am curious if there is a more efficient method to achieve the same result?

javascript arrays json dictionary

Answer 1

Answer №1

Option 1: Utilizing Array.prototype.map()

Experience the new javascript Array.prototype.map() array function. In this scenario, consider using:

var developmentBandwidth = origArray.map(function(obj) {
  return parseInt(obj.cachedBandwidthDevelopment) + parseInt(obj.notCachedBandwidthDevelopment);
});

developmentBandwidth will result in an array of numbers.

Please be aware that this functionality is exclusively available in ECMAScript 5 and modern browsers. For more details, refer to MDN at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

If you need compatibility with older browsers, MDN offers a compatibility function for your convenience.

Option 2: Leveraging jQuery.map()

It appears that the jQuery library offers a similar feature. You can achieve the same result as shown above with:

var developmentBandwidth = $.map(origArray, function(obj, index) {
  return parseInt(obj.cachedBandwidthDevelopment) + parseInt(obj.notCachedBandwidthDevelopment);
});

For a detailed comparison between the two options, click here

Answer 2

Option 1: Utilizing Array.prototype.map()

Experience the new javascript Array.prototype.map() array function. In this scenario, consider using:

var developmentBandwidth = origArray.map(function(obj) {
  return parseInt(obj.cachedBandwidthDevelopment) + parseInt(obj.notCachedBandwidthDevelopment);
});

developmentBandwidth will result in an array of numbers.

Please be aware that this functionality is exclusively available in ECMAScript 5 and modern browsers. For more details, refer to MDN at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

If you need compatibility with older browsers, MDN offers a compatibility function for your convenience.

Option 2: Leveraging jQuery.map()

It appears that the jQuery library offers a similar feature. You can achieve the same result as shown above with:

var developmentBandwidth = $.map(origArray, function(obj, index) {
  return parseInt(obj.cachedBandwidthDevelopment) + parseInt(obj.notCachedBandwidthDevelopment);
});

For a detailed comparison between the two options, click here

Answer 3

Answer №2

If you want to streamline the elimination of duplicates even more, consider this coffeescript approach which uses concise variable names for improved readability:

demoFunction = (daysdata) ->
  result = {}
  totalsNeeded = {foo: ['a', 'b'], bar: ['b','c']}
  sumFields = (fields, obj) ->
    sum = (t,s) -> t+obj[s]
    fields.reduce(sum,0)
  buildDaysArray = (fields) ->
    sumFields(fields,data) for data in daysData
  for name, fields of totalsNeeded
    result[name] = buildDaysArray(fields)
  result


day1 = {a: 1, b: 2, c: 3}
day2 = {a: 4, b: 5, c: 6}
alert(JSON.stringify(demoFunction([day1, day2]))) # => {"foo":[3,9],"bar":[5,11]}

Answer 4

If you want to streamline the elimination of duplicates even more, consider this coffeescript approach which uses concise variable names for improved readability:

demoFunction = (daysdata) ->
  result = {}
  totalsNeeded = {foo: ['a', 'b'], bar: ['b','c']}
  sumFields = (fields, obj) ->
    sum = (t,s) -> t+obj[s]
    fields.reduce(sum,0)
  buildDaysArray = (fields) ->
    sumFields(fields,data) for data in daysData
  for name, fields of totalsNeeded
    result[name] = buildDaysArray(fields)
  result


day1 = {a: 1, b: 2, c: 3}
day2 = {a: 4, b: 5, c: 6}
alert(JSON.stringify(demoFunction([day1, day2]))) # => {"foo":[3,9],"bar":[5,11]}

Selecting a specific JSON object to generate numerous arrays

Answer №1

Option 1: Utilizing Array.prototype.map()

Option 2: Leveraging jQuery.map()

Answer №2

Similar questions

Numerous SVGs sharing identical IDs

Guide on exporting type definitions and utilizing them with npm link for a local package

Apologies, the system encountered an issue while trying to access the "name" property which was undefined. Fortunately, after refreshing the page, the error was successfully resolved

What is the best way to retain selection while clicking on another item using jQuery?

Discover the magic of using the spread operator to effortlessly insert key-value pairs into an object!

Effective steps after Ajax request

Guide to fetching a string using Angular's http client?

Issue with RESTClient not displaying the Response Message from the Server

including a content tag into an input field within a template

The issue of AngularJS directive failing to update controller variable

Delete ObjectId from Array using Node and Mongoose

Encountering a connectivity issue with the MongoDB server

Utilizing conditional statements within the array.forEach method to select specific sub-objects within an array of objects

How can I convert an HTML table into a PDF using TCPDF while ensuring that all content is contained within a single div in PHP?

Using Regular Expressions in Javascript

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Is there a way to set up an automatic pop-up for this?

What is the reason behind the absence of a removeRange() method in CopyOnWriteArrayList?

The presence of decimal values within an AJAX URL

What could be the underlying reason for the unusual behavior observed in this range polyfill implementation?