Error: The gaugeData2 property is not defined and cannot be read at line 1465 in the evaluation of dashboard.v1.vue in Vue.js

Utilizing PHP with a MySQL database to present data on highcharts in vue.js, I have defined an array in the data section of the page like so to use for displaying the chart data:

data() {
return {
  gaugeData2: [],
}

To retrieve the data from the database, I am using the axios.get function in this manner:

 allRecords: function() {
  axios
    .get("http://localhost/contacts.php" + "?action=fetch-all")
    .then(function(response) {
      console.log(response.data);
      var x = response.data;
      console.log(typeof x);
      
      this.gaugeData2.push(x);
      console.log(this.gaugeData2);
      
    })
    .catch(function(error) {
      console.log(error);
    });
},

However, upon trying this method, I encounter an error in the console - "TypeError: Cannot read property 'gaugeData2' of undefined at eval (dashboard.v1.vue?88bf:1465)"

I came across information online suggesting that data in vue.js returns type object and my function is returning a value of type 'number', causing this error. I attempted to use JSON.parse to convert it into an object type, but to no avail. Any assistance would be greatly appreciated. Thank you in advance for your help.

Answer №1

modify this

.then((response) => {
  console.log(response.data);
  //var x = JSON.parse(response.data)
  var x = response.data
  console.log(typeof x)
  
  this.gaugeData2.push(x)
  console.log(this.gaugeData2)
  
})

convert it to

.then((response) => {
  console.log(response.data);
  //var x = JSON.parse(response.data)
  var x = response.data
  console.log(typeof x)
  
  this.gaugeData2.push(x)
  console.log(this.gaugeData2)
  
})

Learn more about arrow function binding this, or manually binding it.

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

Refresh the Dom following an Ajax request (issue with .on input not functioning)

I have multiple text inputs that are generated dynamically via a MySQL query. On the bottom of my page, I have some Javascript code that needed to be triggered using window.load instead of document.ready because the latter was not functioning properly. & ...

Transforming JSON data into HTML displays only the final <li> element

Please take a moment to review the question provided at the end of this post. I am struggling with understanding why only the last li element from the JSON is being rendered. As a newcomer in this field, any help or guidance would be greatly appreciated! ...

Additional GET request made after update request

After the user updates their contact information in the frontend application, the state is updated and a PUT API request is made to update the current information. When updating user contact details with a PUT call, should another GET call be made to retr ...

Steps for Disabling Autocomplete in a JSP Page

How can I prevent the browser from remembering the username and password on my JSP page after submitting the form? I've already tried using autocomplete=off in the JSP code. <form name="indexFrm" id="indexFrm" autocomplete="off" method="post"> ...

How can I extract and display a particular attribute from an object in a list retrieved through AJAX?

I am currently working on an AJAX call that retrieves a list of objects in JSON format from a database. These objects are then used in an autocomplete text input. However, my challenge is to display only the NAME attribute of each object in the list. $(fu ...

Differentiating Typescript will discard attributes that do not adhere to an Interface

Currently, I am working with an API controller that requires a body parameter as shown below: insertUser(@Body() user: IUser) {} The problem I'm facing is that I can submit an object that includes additional properties not specified in the IUser int ...

Using @carbon/react in conjunction with Next.js version 13 leads to unconventional styling

Here's what I did to set up my Next.js application: npx create-next-app@latest I then installed the necessary package using: npm i -S @carbon/react The global styles in app/globals.scss were customized with this code snippet: @use '@carbon/reac ...

Retrieve each individual element from an array sequentially using jQuery

I am looking to retrieve elements from an array one at a time and only display each element after completing a certain action with the previous one. Here’s an example: var elems = ['Apple','Orange','Banana'], i = 0; ...

What is the process for crafting dynamic HTML pages?

My challenge involves developing web pages with a variety of checkbox options that allow users to select at least one item before submitting the form. Once the user selects multiple items and submits the form, I need to display the next page with data bas ...

Working with Three.js: Retrieving an object post-loading using GLTF Loader

Is there a method in three.js using the GLTF loader to access an object for transformations after it has been loaded? It seems like attempting this approach does not yield results gltf.scene.position.set(10,10,10) Sample Code: function getObject(){ ...

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

Trigger a notification based on the selected choice

Here is some sample HTML code: <div id="hiddenDiv" style="display: none;"> <h1 id="welcomehowareyou">How are you feeling today?</h1> <select name="mood" id="mood"> <option value="" disabled selected>How are you feeling?</o ...

How do I programmatically switch the Material-UI/DatePicker to year view in React?

I have a DatePicker component set up in my project, and it works perfectly fine. However, for my specific use case, I only need the year view to be displayed. Within the child component of the DatePicker (Calendar), there is a function called: yearSelect ...

Is there a way to transform JSON text into a JSON object?

Similar Question: How do I convert JSON to a JavaScript object? { "data": [ { "name": "JoongBum Lee", "id": "526210623" }, { "name": "\uc774\uc778\uaddc", ...

Searching for single and double quotes within a string using RegExp in JavaScript

I have encountered an issue while searching for a substring within a string using the code below: mystring.search(new RegExp(substring, 'i')) The reason I am utilizing new RegExp is to perform a case-insensitive search. However, when the string ...

Is JSON required to transmit an object using socket.io?

I have an object on the frontend that I want to broadcast to all connected clients. Can I send it as is, in its original form? Or do I always have to convert it into a JSON string before sending? Here is my object: var myBox = { x: 400, ...

Attempting to display the contents of an array by iterating through it with a loop in a Angular JS using Javascript

I am attempting to display each item in an array that is a part of an object's property: { position: "Finance Office Assistant", employer: "Washtenaw County Finance Department", location: "Ann Arbor, MI", start_date: " ...

How can I execute a function when ng-click is triggered on an <a> tag, and ensure it opens in a new tab?

I am facing an issue with an element in my code, which is as follows: <a ng-click="vm.openPage(page)">{{page.pageId}}</a> Within the vm.openPage() function, there are validations that need to be performed before redirecting to the page refere ...

Encountered a peculiar problem with nested $.ajax calls within another $.ajax call

Starting from this point - I've set up the base configuration for all upcoming AJAX requests as follows: $.ajaxSetup({ beforeSend : function(){ $("#ajax-loader").dialog({ modal : true }); }, complete : function(){ $( ...

Switching the Cursor Image When Hovering Over a Different Image with JavaScript or jQuery

I have been trying to implement a feature where I hover over an image and a custom cursor (150x150) appears. Despite my best efforts, the hover effect is not as smooth as I would like it to be. Can someone please provide guidance on how to achieve this sea ...