Vue.js - How to fetch JSON data object by object?

Question

I have a big JSON file (40 MB) that contains information about countries, their ids and finally a sum that I need to get its total.

{
        "0": {
                "id": 0,
                "country": "usa",
                "sum": 201,
        },
        "1": {
                "id": 1,
                "country": "fr",
                "sum": 133,

        }
}

When I try to fetch this data into a variable it works good but consumes so much memory, so I want to read these country objects' only sum field and then calculate the total sum. How can I do that?

I'm using following code to get the whole JSON:

fetch(fetchURL)
    .then(response => response.json())
    .then(responseJSON => {
        this.json_data = responseJSON;
    })
    .catch(error => {
        console.log(error);
    });

responseJSON.sum does not work, I think it requires index but I couldn't do it in the fetch.

"When I try to fetch this data into a variable it works good but consumes so much memory" I think you should this from the backend. — Precious Okwu
– Precious Okwu, Commented Dec 27, 2018 at 14:45
@BoussadjraBrahim, yes. Thank you very much, I think it has same efficiency with the solution I marked, right? — Mehmet Ali
– Mehmet Ali, Commented Dec 27, 2018 at 15:30
yes i know but i recommend to use functions like map, reduce and forEach when you work with arrays instead of loops using for — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 27, 2018 at 15:34

Ouriel Boiria-Lesaffre · Accepted Answer · 2018-12-27 15:00:39Z

2

I am not sure to fully understand what you want to do: either get an array with only the sum property because your responseJSON is too big, or get the actual sum of all the sum variables.

Here is a portion of code that might help :

var countries = [
 {
   "id": 0,
   "country": "usa",
   "sum": 201,
 },
 {
   "id": 1,
   "country": "fr",
   "sum": 133,
 }
];

var totalSum = 0;

var sumArray = countries.map(function(country) {
  totalSum = totalSum + country.sum;
  return country.sum;
});

In this portion of code, I am using the javascript map function to get an array with all the sum variables in it. I am also making the total sum of the sum variables with the totalSum variable.

If you just need to get the total sum of the sum variables, I would rather recommend to use the forEach javascript function rather than the map function.

Hope this might help...

answered Dec 27, 2018 at 15:00

Ouriel Boiria-Lesaffre

556 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehmet Ali Over a year ago

What you have done is exactly what I want to do but I try to make it while fetching the json

Sankalpa Timilsina · Accepted Answer · 2019-01-09 02:53:37Z

1

In ES6, you can simply do the following:

 fetch(fetchURL)
        .then(response => response.json())
        .then(responseJSON => {
            var sum = 0;
            for(var i = 0; i < Object.keys(responseJSON).length; i++) {
              sum += responseJSON[i]['sum'];
            }
            console.log(sum); // This is the total sum
        })
        .catch(error => {
            console.log(error);
        });

edited Jan 9, 2019 at 2:53

answered Dec 27, 2018 at 15:07

Sankalpa Timilsina

3411 silver badge10 bronze badges

1 Comment

Mehmet Ali Over a year ago

It does make sense and it is actually a solution for me, thanks.

Boussadjra Brahim · Accepted Answer · 2018-12-27 15:21:10Z

1

You could do it simply using reduce function as follows

 fetch(fetchURL)
    .then(response => response.json())
    .then(responseJSON => {
    const reducer = (accumulator, currentValue) => accumulator.sum + currentValue.sum;
        let sum =Object.values(responseJSON).reduce(reducer);

    })
    .catch(error => {
        console.log(error);
    });

Example

let arr = {
  "0": {
    "id": 0,
    "country": "usa",
    "sum": 201,
  },
  "1": {
    "id": 1,
    "country": "fr",
    "sum": 133,

  }
}

const reducer = (accumulator, currentValue) => accumulator.sum + currentValue.sum;
let sum = Object.values(arr).reduce(reducer);

console.log(sum)

answered Dec 27, 2018 at 15:21

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to fetch JSON data object by object?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related