Difficulty displaying data from PapaParse in VueJS despite successful retrieval in console

My first attempt at using PapaParse is running into some issues. I am successfully parsing a remote CSV file and storing the data, as confirmed by console.log. However, when I try to output it with a v-for loop, nothing seems to be working.

To achieve this, I am utilizing the vue-papa-parse library.

Take a look at my code below:


<template>
    <div class="uk-section">
        <div class="uk-container">
            <ul v-if="cases">
                <li v-for="(item, index) in cases" :key="index">{{item.date}} / {{item.World}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cases: [],
        }
    },
    methods: {
        totalCases(){
            let url = "https://covid.ourworldindata.org/data/ecdc/total_cases.csv";
            this.$papa.parse(url, {
                header: true,
                download: true,
                dynamicTyping: true,
                complete: function(results) {
                    this.cases = results.data;
                    console.log(this.cases);
                }
            })
        }
    },
    mounted() {
        this.totalCases();        
    }
}
</script>

https://i.stack.imgur.com/pmErZ.png

I seem to be at a roadblock without any errors to guide me. If you have any insights or suggestions on what might be going wrong, I would greatly appreciate your help. Thank you.

Answer №1

The problem could arise from utilizing the this keyword within the complete callback function. Consider replacing it with an arrow function instead.

complete: (results) => {
   this.records = results.data;
   console.log(this.records);
}

Alternatively, you can store this in another variable and use that variable inside the function.

let self  = this;

complete: function(results) {
   self.records = results.data;
   console.log(self.records);
}

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

Missing pieces of data | Utilizing React and Redux Toolkit

I'm facing a problem that's keeping me up for almost 24 hours. I just finished coding this slice, but when I submit the data, only the automatically generated ID is returned. Let me explain further - I have a skill component with two input forms ...

The GIPHY API object returns no results

Utilizing Angular 2 to fetch data from the GIPHY API. export class ListaGifsComponent { gifs : Object[] = []; urlBase = "http://api.giphy.com/v1/gifs/search?q="; termoPesquisado = "ryan+gosling"; key = "O8RhkTXfiSPmSCHosPAnhO70pdnHUiWn"; ...

Adjust the size of the div to fit its content while maintaining the transition animation

I am aiming for the DIV height to automatically adjust to the text within it, while also maintaining a minimum height. However, when the user hovers their mouse over the DIV, I want the height to change smoothly without losing the transition effect. When ...

Make sure to prevent losing the global status in Vuex and VueRouter when the page is refreshed

As I develop a Single Page Application (SPA), I am utilizing Vuex to manage session states on the client side. However, I have noticed that the state resets whenever the browser is manually refreshed. Is there a way to prevent this behavior without relying ...

Tips for inserting line breaks within a <p> element in a contentEditable division

When I press enter or shift+enter on my contentEditable div, the new line is shown as a textNode within the div. However, I prefer the new line to be inside a p element. Seeking a straightforward solution Utilizing React Js, I store the content of the co ...

SapUI5: Implementing a toggle functionality to display/hide one list item based on another list item's action

UI5 is a versatile framework with numerous possibilities, but sometimes I find myself struggling to implement ideas that would be easier in traditional HTML. Here's the scenario: I want to create a List with ListItems that display cities like Berlin, ...

JavaScript makes it possible to access subnodes in XML by utilizing specific methods and

I am looking to utilize javascript to extract data from an XML file that has been loaded into a webpage. Below is the XML file (a.xml) that I am working with. a.xml <?xml version="1.0"?> <Step rID="T6"> <Obj ><![CDATA[Get Data Ta ...

Compiling TypeScript to JavaScript with Intellij IDEA while preserving the folder hierarchy

Seeking assistance with maintaining directory structure when compiling Typescript to Javascript in Intellij Idea. The current directory setup is as follows: root - ts - SomeClass1.ts - SomeFolder - AwesomeClass2.ts - tsc The desired compiled file ...

Issue with rendering images on Bootstrap-Vue card component

In the process of creating a static website with Vue.js, I am attempting to incorporate a basic Bootstrap card using Bootstrap-Vue. Unfortunately, I am facing an issue where the image does not display when utilizing the b-card component with the img attrib ...

modify an element using jquery

Hey there! I'm facing an issue where I have an ID of #item_quantity in a span, and I want it to refresh its contents once a button with the ID of #update_cart is clicked. It seems that everything else updates fine on click, but for some reason, the sp ...

Why does the socket.io output only appear after I refresh the page?

Feeling stuck and seeking guidance. After following tutorials, I was able to develop a basic user registration/login app in nodejs/express with the addition of a socket.io chat feature. Upon user login, they are directed to the real-time chat page where i ...

Purging the JavaScript output

Currently, I am calling an API and receiving a list of results. These results are then processed into an object for iteration and display. Below is the function responsible for this process: var getAvailability = () => { if (chosenData.hot ...

Leverage PHP to dynamically populate a chart.js visualization with information sourced from an SQLite Database

I'm attempting to use chart.js to display data from an SQLite database using PHP, but I've been running into issues. Despite following multiple online tutorials, my graph remains empty or disappears altogether. This is my first time working with ...

Navigating through VueJS: Understanding the Routing Concept

Here's a query that might seem silly, especially since I'm unsure if I'm working with VueJS or VueJS 2.0. I'm attempting to implement basic routing functionality where I can access the parameters or path from the URL. For instance **** ...

Issue encountered: Unable to load resource - ajax file upload failed due to net::ERR_SSL_BAD_RECORD_MAC_ALERT error

I've implemented an AJAX form file upload using jQuery. After testing my code across multiple computers and browsers, I've encountered an issue on one Windows 8 machine running Chrome where the upload functionality fails with the following error ...

Errors in Data Capture from AJAX Dropdown Selections

Recently, I've encountered an issue with one of my data fields while attempting to save it to a mySQL database. The problem seems to be related to the fact that the 'id' for the text value is saved instead of the actual text value itself, wh ...

I'm looking for a way to showcase tasks in Fullcalendar that don't have a set end date

Is there a way to display a task in the full calendar when the task has a start date but no defined end date, such as a promotion that lasts until stock runs out? I would like the timeline for this type of task to extend indefinitely. However, since such ...

The image upload failed: the server could not locate the requested URL

I am completely new to working with Flask, and I'm currently in the process of creating a basic image uploading application. After comparing my code with various tutorials on how to build similar apps, it seems like everything is in place. However, w ...

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

Using React and CSS. I have set up my application to display a faded image on hover, with text that fades in over it. However, I am facing an issue where touching the text with my cursor removes the fade effect. Does anyone have a solution for preventing ...

Obtain the height and width of the original images from the href and assign them to your attributes using jQuery

Hey there pals, I'm currently on a mission to fetch the dimensions (height and width) of an image from a hyperlink and then insert those values into its attribute. This task has got me going bonkers! Here's my snippet: <figure> <a ...