Vue / Nuxt.js - Calculate total value of nested JSON values

Question

Using Nuxt async data, I am fetching a JSON object with a nested array in the following format:

"topic_list": {
    "topics": [
      {
        "id": 9148,
        "title": "A",
        "views": 12
      },
      {
        "id": 3228,
        "title": "B",
        "views": 88
      }
      ]
}

The data is being loaded asynchronously:

export default {
  data () {
    return { topics: 'default', users: '0', views: '0', total: [] }
  },
  asyncData ({ params }, callback) {
    axios.get(`data.json`)
    .then((res) => {
      callback(null, { topics: res.data.topic_list.topics, users: res.data.users,

      })
    })
  }
}

I would like to know what would be the best approach to calculating the sum total of all views. I am aware of reduce() and imagine these values need to be pushed into an array - but how to do this with data loaded asynchronously?

you need computed property for total, where you need to check for topics updates — Niklesh Raut
– Niklesh Raut, Commented Nov 13, 2018 at 12:48
How can you get all the views array data? res.data.views ? — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Nov 13, 2018 at 12:55

Ariel · Accepted Answer · 2018-11-13 12:56:14Z

1

Just sum the views

      callback(null, { topics: res.data.topic_list.topics, users: res.data.users, totalOfViews: 
res.data.topic_list.topics.reduce((sum, currentItem) => (currentItem.views + sum), 0) })

This will add the views:

res.data.topic_list.topics.reduce((sum, currentItem) => (currentItem.views + sum), 0)

answered Nov 13, 2018 at 12:56

Ariel

1,4368 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Vue / Nuxt.js - Calculate total value of nested JSON values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related