Adding up values in JavaScript object

Question

Adding up values in JavaScript object

After fetching JSON data from an API, I am using the map function to create my own object structure.

The data consists of multiple objects. An example of the data structure is as follows:

{
  "data": {
    "job": [
      {
        "jobNumber": "1",
        "jobTasks": {
          "jobTask": [
            {
              "total": { "amountString": "10.00" }
            },
            {
              "total": { "amountString": "10.00" }
            }
          ]
        }
      },
      {
        "jobNumber": "2",
        "jobTasks": {
          "jobTask": [
            {
              "total": { "amountString": "20.00" }
            },
            {
              "total": { "amountString": "20.00" }
            }
          ]
        }
      },
      {
        "jobNumber": "3",
        "jobTasks": {
          "jobTask": [
            {
              "total": { "amountString": "30.00" }
            },
            {
              "total": { "amountString": "30.00" }
            }
          ]
        }
      }
    ]
  }
}

Based on the provided example, I aim to achieve the following results:

jobNumber: 1 - Total 20. jobNumber: 2 - Total 40. jobNumber: 3 - Total 60.

Below is the code snippet that I am using:

var array = response.data.map(function(item, array) {

   var sumTaskTotal = item.jobTasks.reduce(function(sumTaskTotal, item, index) {
       if (item !== null && item.total !== null) {
          sumTaskTotal += item.total.amountString;
          return sumTaskTotal;
       }
    }, 0);

    array = response.data.map(item => ({
      jobNumber: item.jobNumber,
      sumTaskTotal: sumTaskTotal,
    }));
}

However, the sum calculation keeps accumulating, resulting in:

jobNumber: 1 - Total 120. jobNumber: 120 - Total 120. jobNumber: 3 - Total 120.

I have experimented with for loops but haven't yet found a solution.

javascript json object mapreduce

Answer 1

Answer №1

It's a bit unclear how you ended up with the result of

jobNumber: 1: Total 120. jobNumber: 120: Total 120. jobNumber: 3: Total 120.

. When I tested your code, the array logged showed that it contained 3 undefined items; this is because each iteration within the map function doesn't return anything.

Furthermore, both data and jobTasks are objects. You need to use map or reduce methods on the properties like job and jobTask.

In terms of adding totals, remember that amountString is a string, so you should convert it to a number first. Otherwise, concatenating a string to a number will not result in addition, as shown by 010.00 in your initial iteration.

The outer map function where array = response.data.map... would just reiterate through the jobs again unnecessarily. Instead, consider simplifying it to:

return {
  jobNumber: item.jobNumber,
  sumTaskTotal,
};

This modification would yield an array with 3 objects:

[{
  jobNumber: '1',
  sumTaskTotal: 20,
}, {
  jobNumber: '2',
  sumTaskTotal: 40,
}, {
  jobNumber: '3',
  sumTaskTotal: 60,
}]

If you prefer, you can implement a nested reduce approach:

const formatted = response.data.job.reduce((prevString, currentJob) => {
  const total = currentJob.jobTasks.jobTask.reduce((prevTotal, currentJobTask) => {
    return prevTotal + Number(currentJobTask.total.amountString);
  }, 0);

  return `${prevString}jobNumber: ${currentJob.jobNumber}: Total ${total}. `;
}, '');

const response = {
  "data": {
    "job": [{
      "jobNumber": "1",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "10.00"
          }
        }, {
          "total": {
            "amountString": "10.00"
          }
        }]
      }
    }, {
      "jobNumber": "2",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "20.00"
          }
        }, {
          "total": {
            "amountString": "20.00"
          }
        }]
      }
    }, {
      "jobNumber": "3",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "30.00"
          }
        }, {
          "total": {
            "amountString": "30.00"
          }
        }]
      }
    }]
  }
};

const formatted = response.data.job.reduce((prevString, currentJob) => {
const total = currentJob.jobTasks.jobTask.reduce((prevTotal, currentJobTask) => {
  return prevTotal + Number(currentJobTask.total.amountString);
  }, 0);
  
  return `${prevString}jobNumber: ${currentJob.jobNumber}: Total ${total}. `;
}, '');

console.log(formatted.trim());

Answer 2

It's a bit unclear how you ended up with the result of

jobNumber: 1: Total 120. jobNumber: 120: Total 120. jobNumber: 3: Total 120.

. When I tested your code, the array logged showed that it contained 3 undefined items; this is because each iteration within the map function doesn't return anything.

Furthermore, both data and jobTasks are objects. You need to use map or reduce methods on the properties like job and jobTask.

In terms of adding totals, remember that amountString is a string, so you should convert it to a number first. Otherwise, concatenating a string to a number will not result in addition, as shown by 010.00 in your initial iteration.

The outer map function where array = response.data.map... would just reiterate through the jobs again unnecessarily. Instead, consider simplifying it to:

return {
  jobNumber: item.jobNumber,
  sumTaskTotal,
};

This modification would yield an array with 3 objects:

[{
  jobNumber: '1',
  sumTaskTotal: 20,
}, {
  jobNumber: '2',
  sumTaskTotal: 40,
}, {
  jobNumber: '3',
  sumTaskTotal: 60,
}]

If you prefer, you can implement a nested reduce approach:

const formatted = response.data.job.reduce((prevString, currentJob) => {
  const total = currentJob.jobTasks.jobTask.reduce((prevTotal, currentJobTask) => {
    return prevTotal + Number(currentJobTask.total.amountString);
  }, 0);

  return `${prevString}jobNumber: ${currentJob.jobNumber}: Total ${total}. `;
}, '');

const response = {
  "data": {
    "job": [{
      "jobNumber": "1",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "10.00"
          }
        }, {
          "total": {
            "amountString": "10.00"
          }
        }]
      }
    }, {
      "jobNumber": "2",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "20.00"
          }
        }, {
          "total": {
            "amountString": "20.00"
          }
        }]
      }
    }, {
      "jobNumber": "3",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "30.00"
          }
        }, {
          "total": {
            "amountString": "30.00"
          }
        }]
      }
    }]
  }
};

const formatted = response.data.job.reduce((prevString, currentJob) => {
const total = currentJob.jobTasks.jobTask.reduce((prevTotal, currentJobTask) => {
  return prevTotal + Number(currentJobTask.total.amountString);
  }, 0);
  
  return `${prevString}jobNumber: ${currentJob.jobNumber}: Total ${total}. `;
}, '');

console.log(formatted.trim());

Answer 3

Answer №2

Simply utilize the forEach method to retrieve your desired string.

const data = {
  "data": {
    "job": [
      --
    ]
  }
}

let string = "";

data.data.job.forEach((item) => {
  const sum = item.jobTasks.jobTask.reduce((total, i) => parseFloat(i.total.amountString) + total, 0);
  string += `jobNumber: ${item.jobNumber}: Total ${sum}. `;  
});
console.log(string);

Check out this example on jsbin for reference

Remember to watch out for an unnecessary space after your string and use the trim function if needed.

Answer 4

Simply utilize the forEach method to retrieve your desired string.

const data = {
  "data": {
    "job": [
      --
    ]
  }
}

let string = "";

data.data.job.forEach((item) => {
  const sum = item.jobTasks.jobTask.reduce((total, i) => parseFloat(i.total.amountString) + total, 0);
  string += `jobNumber: ${item.jobNumber}: Total ${sum}. `;  
});
console.log(string);

Check out this example on jsbin for reference

Remember to watch out for an unnecessary space after your string and use the trim function if needed.

Adding up values in JavaScript object

Answer №1

Answer №2

Similar questions

The Angular2 Http request isn't being triggered

Utilizing ng-style with a ForEach loop on an Object

Running a JavaScript file from Docker to fill a MongoDB database is not working when using the WSL shell on Windows 10

A situation arises where the third-party library (react-dev-utils/webpackHotDevClient) is unable to retrieve the necessary data when requiring the 'chalk' object,

Populate items on the webpage with data from a JSON document

Html Canvas Overlay that allows content underneath to remain interactive

The testcafe selector fails to locate any 'div' elements

Obtain a JSON object in C# through a web request

Is it possible to convert a string using object-to-object syntax?

What is the process for updating the label on the leaflet control layers toggle?

div consistently positioned above fixed element

Generate tables and rows dynamically

Encountering complications while attempting to integrate Ng-SweetAlert-2 into AngularJS

leveraging UI-Router for navigating based on app state and data

Retrieve data from a specific field in a JSON response

What steps are needed to generate an Observable that contains boolean values?

Tips for displaying the node's label in Arbor js when hovering over the node

Yii2 paired with Ajax: The output does not consist of the SQL query outcomes

Discover the most recent date of a document by analyzing two distinct fields: the month and the year

Inner output not displaying on the screen