Using Vue/Nuxt.js to compute the cumulative sum of hierarchically structured JSON data

When using Nuxt async data, I am retrieving a JSON object that includes a nested array in the following structure:

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

The data is loaded asynchronously as shown below:

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 am looking for guidance on how to calculate the total number of views efficiently. I know I can use reduce() and assume the values need to be placed into an array, but how would this be done with asynchronously loaded data?

Answer №1

Simply sum up all 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 calculation will aggregate the views:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Most effective strategy for handling PHP processing delays

As a newcomer to web programming, I appreciate your patience with me. I have developed a web page that submits form data to a PHP exec() function. This function retrieves data from a website, processes it in different ways, and saves it on my server. Whil ...

After refreshing the page, vuex is encountering null values when using firebase.auth().onAuthStateChanged

Encountering an issue with Vuex and Firebase Authentication integration. When reloading the page, there is a delay in response from firebase.auth().onAuthStateChanged. I require an immediate response upon page reload without using router guards as seen in ...

Create a visual representation using a push button

Hey there, I'm attempting to create an image using a button on canvas. However, I'm facing an issue where I can't draw on the clear canvas. Here's my code: <!doctype html> <html> <head> <meta charset="utf-8"> ...

What is the method to assign an initial value to React.createRef()?

Scrolling management in my component is handled through a ref that represents the current scroll value. I've chosen to use refs instead of state and setState because using setState while the user is scrolling would result in a choppy and unresponsive ...

Switching background images with Javascript through hovering

I am currently working on implementing a background changer feature from removed after edits into my personal blog, which is only stored on my local computer and not uploaded to the internet. However, I am unsure of what JavaScript code I need to achieve t ...

attempting to link to an external style sheet hosted on Amazon S3

I am working on creating a widget or snippet of a website that can easily be added to another webpage by including a script tag for my JavaScript file hosted on Amazon S3 and a div element where content will be inserted. Even though I have uploaded the C ...

The server has denied access to the resource due to a HTTP 403 Forbidden error in the AJAX request

I have exhausted all resources online in an attempt to resolve an error I am encountering with my AJAX request. Even after trying XMLHttpRequest() request, the problem remains unsolved. Below is the code for my Ajax Request: $.ajax({ type: "POST", url: " ...

Determine the image's position in relation to its parent element while factoring in any vertical offset

Within my HTML, I have arranged two images to sit adjacent to one another. Interestingly, one image happens to be taller than the other. Despite assigning a CSS property of vertical-align: middle to both images, the result is that the shorter image appears ...

Turned off jquery on a specific div in order to resolve compatibility problems with Vue.js

Currently, I am working on a Drupal project which includes JQuery in all pages. We have recently introduced Vue.js for creating dynamic components directly in the HTML pages (not for building a single-page application). However, we are facing an issue whe ...

Employing a for loop to verify the existence of a JSON key

Currently, I am attempting to loop through an EJS JSON object and verify the existence of values. If a value does exist, I want to add the corresponding URL to an array further down. Upon loading the page, I am encountering an issue where I am informed th ...

Implementing a Unique Approach to Showcase the Initial PDF Page as Cover through Django and JS

I would like to enhance my script so that when a user hovers over an object on the template, a PDF cover page can be set for each object. Current process: Currently, I am able to upload files in the .pdf and .epub formats for each object with additional ...

Vue draggable component

I'm currently facing an issue while trying to integrate the Vue Draggable Component into my existing component. Everything works perfectly fine in my component without the draggable feature, but as soon as I add it, the entire content becomes blank. I ...

How can you retrieve the X.509 Certificate from a P12 file using Node JS?

I obtained a p12 file that contains an X.509 Certificate. To handle this file, I am utilizing the forge library: var forge = require('node-forge'); var fs = require('fs'); var keyFile = fs.readFileSync("/path/to/p12/file.p12", 'b ...

Arrange my Firebase Angular users based on a specific value, encountering an error stating "sort is not a function

I'm working on an application using Firebase and Angular, and I have a database containing information about my users: My goal is to sort the users based on their "ptsTotal". In my users.service file, I have a function called getUsersByPoints. Howev ...

Leveraging the flexibility of an undefined variable as a useEffect dependency

Summary: Need help using listRef.current.clientWidth as a dependency in useEffect. I'm working on creating a dynamic list that automatically adjusts the width of its items based on the list's width. I've almost got it working, but I'm ...

What is causing the slow performance of this JavaScript array retrieval?

I am working with a large array called frames_to_boxes, consisting of 5000 elements. Each element is an array of Objects belonging to the Box class: class Box { constructor(x, y, width, height, frame, object_class, id) { this.x = x; this.y = y; ...

Changing a variable within a method does not automatically reflect in the child component

Need help with Vue update process for props/child components. Consider this component: <template> <v-card> <Modification v-model="newObject"></Modification> <OtherComponent @close="resetObject">& ...

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

Collecting a batch of 100 values from an array

Here is a situation where ids represents an array containing the steam64 ids of all users in your friendslist. According to the steam web api documentation, you can only pass a list of 100 comma-separated steam64 ids to the GetPlayerSummaries function. Som ...

After changing the value of a <select> element in Vue, the fetched data is delayed by one step

I'm currently working on a feature that involves fetching data from a URL that changes every time a user chooses a new value from a <select> dropdown. The fetched data updates the songkickData array with the latest information. However, when I c ...