I have a JSON end point for projects in a county. I am able to call a list of any of the object properties. What I want to do is to add together either all the values of budget property or the spent_encumbered by the value of category property.

For example, the total cost of all the projects that were for bridges, general county projects, school systems projects, etc.

Ideas I've had:

  • Return all the values of the category property
  • Push them all to an array
  • Do an if statement, if data[i].category === "school system projects" // or whatever array value?
  • For loop to add up all the returned budget values for the specific category.


  • Is there a reason why you're sending all this data over the wire for the client to crunch rather than doing it on the server side?
    – user40980
    Nov 10, 2015 at 17:39
  • It's not my data, I'm getting it from a county. Also, this is for learning not just how to call data via an API but manipulate it and also to practice using objects.
    – giscard78
    Nov 10, 2015 at 17:47

1 Answer 1


What you are looking for is some sort of a filter/map/reduce. Fortunately, JavaScript with modern browsers provides exactly that.

Using jQuery to get the data:

           function( data) { cityData = data });

This returns a nice array with all the objects already parsed. Once you've gotten the data, you can run this through a filter, for example:

var filteredArray = cityData.filter(
  function(value) {
      return value.fiscal_year='2015' && typeof value.spent_encumbered !== 'undefined'

This can then be reduced into a single number - for example:

var total_spent_encumbered = 
    function(previousValue, currentValue, index, array) { 
       return previousValue + Number(currentValue.spent_encumbered) }, 0

You can of course, combine all these functions and externalize the filter and reduce internal functions to allow you to mix and match both, giving you a lot of flexibility.

Link to JSFiddle

  • I'm new to using $.getJSON, forgive me if I am missing something obvious, but using $(document).ready(function () { var cityData = {}; $.getJSON('https://opendata.howardcountymd.gov/resource/ghg6-4crr.json', function (data) { cityData = data }); console.log(cityData); }); I do not get any returned data
    – giscard78
    Nov 10, 2015 at 18:02
  • yeah, that is tricky. When jQuery is getting data from a remote source, the call is asynchronous. You have to wait for the data to be returned. If you did this: $(document).ready(function () { var cityData = {}; $.getJSON('opendata.howardcountymd.gov/resource/ghg6-4crr.json', function (data) { cityData = data; console.log(cityData); }); }); You should see the data Nov 10, 2015 at 18:04
  • Put the console.log in the function, got it! Sorry to keep bugging you with this but I am trying to work my way through your example. I'm using jsfiddle (only thing I have access to right now) and it's telling me that cityData.filter is not a function. Is that because of jsfiddle's limitations or something else? I also tried by adding in var filteredArray = []; at the beginning.
    – giscard78
    Nov 10, 2015 at 18:12
  • I've added in a link to a working version on jsFiddle Nov 10, 2015 at 18:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.