Using same variable in successive Ajax functions

Question 1

I have 2 ajax functions in the same script and I want the result of the first one to be collect by the second one and send to the proper URL,

Here is my code :

 <!DOCTYPE html>
 <meta charset="utf-8"/>
 <html>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
 $.ajax({
 url:"TEST_2.csv",
 dataType:"text",
 success:function(data)
 {
 var lines=data.split("\n");
 var result = [];
 // NOTE: If your columns contain commas in their values, you'll need
 // to deal with those before doing the next step 
 // (you might convert them to &&& or something, then covert them back later)
 // jsfiddle showing the issue https://jsfiddle.net/
 for(var i=0;i<lines.length;i++){
 var obj = {};
 var currentline=lines[i].split(",");
 for(var j=0;j<currentline.length;j++){
 obj=currentline[j];
 }
 result.push(obj);
 }
 //return result; //JavaScript object
 return result;
 }
 });
 // Définition des paramètres et des entêtes de la requête avec l'identifiant de la liste dans l'URL
 var listId = 261291 
 settings = {
 "async": true,
 "crossDomain": true,
 "url": 'https://www.kizeoforms.com/rest/v3/lists/'+listId,
 "method": 'PUT',
 "headers": {
 'content-type': 'application/json',
 Authorization: '*****',
 },
 // Ajout des données dans le corps de la requête
 processData: false,
 data: result,
 }
 $.ajax(settings).done(function(response) {
 console.log(response)
 })
 });
 </script>
 </html>

When I run the script on my browser I get this error in the console : enter image description here

I don't see how to pass the content of the "result" variable in the "data" of the "settings" variable which I then pass to my second ajax function,

I'm pretty new to ajax so I might be doing something totally wrong here,

Thank,

Question 2

Hello JS1, welcome to the community! why are you making an ajax call to read the csv file? Also, to be sure that the second one only executes once the first one is done, maybe you could run it at the .done() callback?

Question 3

I posted you a way to get the result object generated and test it before being sent to the url. Tell me if I understood you all right so I update it if not :-) BOL!

Question 4

I think you are building an array of json objects out of your csv file at your first block of code. Here's a simpler yet effective way to do it:
Source answer is here: convert CSV lines into Javascript objects

Function to read the file:

function loadFile(filePath) {
 var result = {};
 var items = null;
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("GET", filePath, false);
 xmlhttp.send();
 if (xmlhttp.status==200) {
 items = xmlhttp.responseText;
 }
 result.items = items;
 return result;
}

Your first code would end up like this:

 var csvString = loadFile("./TEST_2.csv");
 var arr = csvString.split('\n'); 
 var items = {};
 var headers = arr[0].split(',');
 for(var i = 1; i < arr.length; i++) {
 var data = arr[i].split(',');
 var obj = {};
 for(var j = 0; j < data.length; j++) {
 obj[headers[j].trim()] = data[j].trim();
 }
 items.push(obj);
 }
 var result = {}
 result.items = items;
 console.log(JSON.stringify(result));

Then you can check if the object was correctly built and run the ajax PUT that follows:

if (Array.isArray(result) && result.length) {
 var listId = 261291 
 settings = {
 "async": true,
 "crossDomain": true,
 "url": 'https://www.kizeoforms.com/rest/v3/lists/'+listId,
 "method": 'PUT',
 "headers": {
 'content-type': 'application/json',
 Authorization: '*****',
 },
 processData: false,
 data: result,
 }
 $.ajax(settings).done(function(response) {
 console.log(response)
 });
}

Question 5

Thanks for the answer, but it doesn't work with me it tell "require" is undefined

Question 6

updated it. can you check if works for you? i cant test it at the moment but i think it will put you on the right path. i think the issues with the initial code are 1) not checking if result exists before using it, 2)result was declared inside an independent ajax call.

Question 7

Thanks for the help, I tried to use directly the bufferString that you used in fiddle so I don't need to use require to see if there are other problems and there is still another error, "jsonObj is not defined"

Question 8

try replacing jsonObj with result here at the settings, i fixed the line at the asnwer:data: result,

Question 9

Thanks, there is another error, I guess it's not that bad but I have "Cannot read property 'split' of null" of this line "var arr = csvString.split('\n'); "

Question 10

By defaults, Ajax is launched with async=true. The second ajax call, can be alunched before the first have finished and result have not value.

For example, you can mark the first Ajax call to syncronous to wait for result is filled

María Antignolo.Maria Antiñolo 4135 silver badges18 bronze badges · Accepted Answer · 2020-02-07 08:29:34Z

I think you are building an array of json objects out of your csv file at your first block of code. Here's a simpler yet effective way to do it:
Source answer is here: convert CSV lines into Javascript objects

Function to read the file:

function loadFile(filePath) {
 var result = {};
 var items = null;
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("GET", filePath, false);
 xmlhttp.send();
 if (xmlhttp.status==200) {
 items = xmlhttp.responseText;
 }
 result.items = items;
 return result;
}

Your first code would end up like this:

 var csvString = loadFile("./TEST_2.csv");
 var arr = csvString.split('\n'); 
 var items = {};
 var headers = arr[0].split(',');
 for(var i = 1; i < arr.length; i++) {
 var data = arr[i].split(',');
 var obj = {};
 for(var j = 0; j < data.length; j++) {
 obj[headers[j].trim()] = data[j].trim();
 }
 items.push(obj);
 }
 var result = {}
 result.items = items;
 console.log(JSON.stringify(result));

Then you can check if the object was correctly built and run the ajax PUT that follows:

if (Array.isArray(result) && result.length) {
 var listId = 261291 
 settings = {
 "async": true,
 "crossDomain": true,
 "url": 'https://www.kizeoforms.com/rest/v3/lists/'+listId,
 "method": 'PUT',
 "headers": {
 'content-type': 'application/json',
 Authorization: '*****',
 },
 processData: false,
 data: result,
 }
 $.ajax(settings).done(function(response) {
 console.log(response)
 });
}

Thanks for the answer, but it doesn't work with me it tell "require" is undefined
updated it. can you check if works for you? i cant test it at the moment but i think it will put you on the right path. i think the issues with the initial code are 1) not checking if result exists before using it, 2)result was declared inside an independent ajax call.
Thanks for the help, I tried to use directly the bufferString that you used in fiddle so I don't need to use require to see if there are other problems and there is still another error, "jsonObj is not defined"
try replacing jsonObj with result here at the settings, i fixed the line at the asnwer:data: result,
Thanks, there is another error, I guess it's not that bad but I have "Cannot read property 'split' of null" of this line "var arr = csvString.split('\n'); "

CollectivesTM on Stack Overflow

Using same variable in successive Ajax functions

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related