Vue.js axios API call throwing error due to undefined property 'map'

Question

Vue.js axios API call throwing error due to undefined property 'map'

Attempting to call a data source from a remote URL results in the error

TypeError: Cannot read property 'map' of undefined

. The axios method is enclosed within axios.js:

.....
result = new Promise((resolve, reject) => {
      axios.get(url)
        .then((response) => {
          const processedData = response.data.response.map((v) => {
            return v;
          })
          resolve(processedData);
        }).catch((error) => {
          if(typeof(error) == 'object'){
            alert(error) // @@@ I ALWAYS LAND HERE
          }
          reject(error.data); 
        });
    });
 ....

Verification in the network console confirms that the API URL being accessed is functioning properly and all data can be viewed. The format of the API is as follows:

[
    {
        "id": 1,
        "name": "alpha",
        "build_id": 50,
        "app_env_names": "",
        "app_env_list": [
            ""
        ],
    },
    {
        "id": 2,
        "name": "feature/OPS-05",
        "build_id": 48,
        "image_tag": "feature_DEVOPS-605-jasc-cr-approval-test-71496674-48",
        "app_env_names": "dev",
        "app_env_list": [
            "dev"
        ],
       .....

Attempts to remove map have been unsuccessful. Seeking advice on resolving this issue. Thank you!

javascript vue.js vuejs2 axios

Answer 1

Answer №1

Correction: Avoid referring to the code below the marked line. It appears to be using a promise construction pattern that may not handle all edge cases effectively.

Instead, consider using

response = axios.get(url).then(({ data }) => data)

.

================================================================

After some quick investigation (thanks to @Phil), I realized my mistake as soon as I published the question. By removing the unnecessary response, the solution simplifies to:

result = new Promise((resolve, reject) => {
        axios.get(url)
          .then((response) => {
            const processedData = response.data.map((v) => {
              return v;
            })
            resolve(processedData);
          }).catch((error) => {
            if(typeof(error) == 'object'){
              alert(error)
            }
            reject(error.data);
          });
      });

Answer 2

Correction: Avoid referring to the code below the marked line. It appears to be using a promise construction pattern that may not handle all edge cases effectively.

Instead, consider using

response = axios.get(url).then(({ data }) => data)

.

================================================================

After some quick investigation (thanks to @Phil), I realized my mistake as soon as I published the question. By removing the unnecessary response, the solution simplifies to:

result = new Promise((resolve, reject) => {
        axios.get(url)
          .then((response) => {
            const processedData = response.data.map((v) => {
              return v;
            })
            resolve(processedData);
          }).catch((error) => {
            if(typeof(error) == 'object'){
              alert(error)
            }
            reject(error.data);
          });
      });

Vue.js axios API call throwing error due to undefined property 'map'

Answer №1

Similar questions

Error with JavaScript callback functions

What could be causing my CORS fetch request to not send cookies to the server?

Using JavaScript to utilize a variable containing a .match method with Regex Expression

Dynamic, AJAX-driven content is experiencing a 200 status code

loading content into a pop-up window with JavaScript

What is the rationale behind not storing OAuth2 access tokens as HttpOnly secure cookies? How could this approach be implemented in a Node.js application?

Implement jqGrid on dynamically generated HTML content

Using D3 to access a nested select and sibling from the JSON property of an object

Tips for updating a plugin from phonegap 2.5 to the most recent version 3.1, and the steps to follow when including a new plugin in phonegap

Transforming the date from JavaScript to the Swift JSON timeIntervalSinceReferenceDate structure

After closing and reopening the jQuery modal, the name does not appear

What is the reason for webpack adding "-es5" and "es2015" to my TypeScript files?

Implementing Bootstrap JavaScript functionality within a Rails 7 application

Struggling to store information in a MongoDB database within my MEAN Stack project

How can we use vanilla JavaScript to implement an image zoom effect on mouse movement?

Is there a way to remove a link to an image that pulls data from another website?

The body-parser module in express 4.0 is currently not accessible for the route handler

Transmit a file using multipart with XMLHttpRequest

Unable to generate a three-dimensional plane on the XZ plane

Angular JS merges various records under a common category from a JSON document