Having difficulty accessing a public array item within chained AXIO transactions in VUE

I am currently facing an issue with a chained AXIOS call that is triggered from an array. The challenge I am encountering is ensuring that the second call completes before the first one initiates another API request, which seems to be working fine so far. However, my main problem lies in the fact that I am unable to reference anything from within the response of the second chain. I need to update either the calling array (arr), a public array this.excelData.results, or even a deep copy of the original array. Each time I try to access the data, I receive the following error message:

 TypeError: Cannot read property 'ORCID' of undefined at eval (webpack- 
    internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel- 
     loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue- 
    loader/lib/index.js?!./src/views/examples/ExcelWorksheet.vue?vue&type=script&lang=js&:410:49) at 
    NodeList.forEach (<anonymous>) at eval (webpack-internal:///./node_modules/cache- 
   loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache- 
   loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/examples/ExcelWorksheet.vue? 
   vue&type=script&lang=js&:381:28) at NodeList.forEach (<anonymous>) at eval (webpack- 
    internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel- 
    loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue- 
    loader/lib/index.js?!./src/views/examples/ExcelWorksheet.vue?vue&type=script&lang=js&:378:33)

I have attempted using 'this' and 'self', but nothing appears to resolve the issue. While debugging in a browser, all elements of the array are visible, yet I am unable to retrieve or manipulate them in code. Is there a specific procedure I should follow to access the data from the second AXIOS call within the original array?


lookUpORCID(){
   this.pubmedArticles=[];
   this.makeRequestsFromArray(this.excelData.results);
},
makeRequestsFromArray(arr) {

   var self = this
   let index = 0;
   function request() {
      let authorName = arr[index]["Last_Name"]

      let linkGetIdList = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?';
      linkGetIdList += 'tool=biosketch&db=pubmed&retmode=json&retmax=200&';
      linkGetIdList += 'term=' + authorName +'[AU] ';
      
      return axios.get(linkGetIdList).then((res) => { 
         index++;
         let idlist = res.data.esearchresult.idlist
         const passID = idlist.join(',')
         if (idlist.length > 0) {  
            var getXmlLink = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?';
            getXmlLink += 'db=pubmed&retmode=xml&id=${passID}';         
            return axios.get(getXmlLink).then((response) => {
               // parse document
               const parser = new DOMParser()
               const xmlDoc = parser.parseFromString(response.data, 'text/xml') // Get ALL XML content
              // Do Stuff

              **This is the spot that I need to change value in array**
              let xyz = arr[index]["ORCID"]

              return request(); 
           }) 
         }

         if (index >= arr.length) {
            return 'done'
         }
      });

  }
  return request();
}

}

Answer №1

If you can access the value of the variable arr, then you would not encounter the error message:

cannot read property index of undefined
.

The reason for this error is that you have increased the value of the variable index after the initial request, and at the incremented position, the variable arr holds the value undefined. As a result, the error states:

Cannot read property 'ORCID' of undefined
.

To confirm the above, consider using console.log(arr[index]) before executing let xyz = arr[index]["ORCID"].

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

Stop jQuery function from activating twice during scrolling

I'm looking for a solution to optimize my code that detects if an element is in the viewport and triggers certain actions. Currently, it re-runs the code every time a scroll event occurs when the element is above the fold. Is there a way to make it on ...

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

Currently, I am in the process of developing an application designed for LTR usage, but I am interested in adding RTL support as well. The application itself is built on top of Material UI React. By using CSS Flex Box, I have managed to rotate the applicat ...

What steps can I take to update this HTML document and implement the DOM 2 Event Model?

I'm struggling with converting my document from the DOM 0 Event model to the DOM 2 Event model standards. I've tried getting help from different tutors on Chegg, but no one seems to have a solution for me. Hoping someone here can assist me!:) P. ...

Vue/Nuxt application encounters timeout when sending Axios request, server does not respond. Interestingly, making the same request with cURL receives a response

I have a Nuxt application that is sending requests to an IIS server running NodeJS as an API. The IIS server is configured to only accept requests from the Vue frontend application server (on ports 80 and 443). When I execute the following curl command fr ...

Python Flask login screen not showing error message

Currently, I'm in the process of developing a login screen that incorporates Bootstrap and utilizes jQuery keyframes shaking effect. The backend functionality is managed by Flask. However, I seem to be encountering an issue where the error message "Wr ...

Learn how to bypass the problem of self-signed certificates in request-promise

In my node application, I am utilizing the request-promise module to make API calls. You can find more information about it here. import request from 'request-promise'; let options = { method: GET, json: true, ...

What is the best way to conceal a modal using jquery?

Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...

Is Protractor compatible with Internet Explorer 9?

For my Angular App that is running on IE9, I need to create end-to-end acceptance tests. I'm curious to know if the browser simulated by Protractor matches the behavior of IE9 or a newer version? ...

Which data types in JavaScript have a built-in toString() method?

Positives: 'world'.toString() // "world" const example = {} example.toString() // "[object Object]" Negatives: true.toString() // throws TypeError false.toString() // throws TypeError Do you know of any other data types that wi ...

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

The Blender model imported into Three.js appears to have been rendered in a lower resolution than expected

I recently brought a gltf model into my Three.js project, which was exported from Blender. The model appears perfectly rendered in , but in my Three.js project, it seems to have lower quality as depicted in these screenshots: https://ibb.co/qrqX8dF (donm ...

Executing multiple HTTP requests simultaneously in groups using an asynchronous for loop for each individual request

I'm currently working on running multiple requests simultaneously in batches to an API using an array of keywords. Read Denis Fatkhudinov's article for more insights. The issue I'm facing involves rerunning the request for each keyword with ...

Show the helper text when a TextField is selected in Material UI

I would like the error message to only show up when a user clicks on the TextField. Here's my code: import React, { useState, useEffect } from 'react'; import { TextField, Grid, Button } from '@material-ui/core'; const ReplyToComm ...

Send users with session user roles to their designated dashboards

I need assistance with redirecting users based on their user role stored in the session array. I am encountering an issue where the redirection to the admin dashboard is not functioning as expected. Can someone provide some guidance on resolving this mat ...

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...

Different techniques to access values in a JSON array without relying on specific index positions

After making a request to an API, I received a JSON array with various attributes. One of the attributes is "State" and my task is to extract all the "EventName"(s) where State: "PR". The user will select the state from a dropdown menu. In order to achiev ...

Display loading images using the Bxslider plugin

Currently, I have implemented a Bxslider on my website with the following HTML markup: <div class="slide"> <a target="_blank" href="#"><img src="image.jpg"/></a> </div> <div class="slide"> <a target="_blank" href= ...

What is the best way to convert a List of objects to JSON using a dynamic variable?

I have a need to serialize a list of objects in a specific way: Imagine I have the following C# class: public class Test { public string Key; public string Value; } List<Test> tests; When I serialize this list (return Json(tests.ToArray()) ...

Comparison of memory allocation efficiency with loop iteration

Within my C program, I have developed a function that accepts a Unicode codepoint as a wide character and then returns a pointer to an array of unsigned characters representing the UTF8 format of that wide character. Additionally, another function in my pr ...

Implement the CSS styles from the Parent Component into the Child Component using Angular 6

Is there a way to apply CSS from the Parent Component to style the child component in Angular 6? Please advise on how to approach this issue. How can we inherit the css styles from the Parent Component? <parent> <child> <p>hello ...