0

I'm trying to find the best way to go about this service call where I retain all the data in a single object. The call returns an object that has a property of next_page_url. If there is a next_page_url the function should keep chaining. Since I don't know what the url is until the next call resolves I need to call these in order and resolve them in order. I'm also collecting data from each call. I haven't been able to figure out what the structure should be what I have so far

getDataFromAllPages = (url) => {
     waniKaniAxios.get(url).then(object => {
         if(object.data.pages.next_url){
             return this.getDataFromAllPages(object.data.pages.next_url.replace(waniKaniAxios.defaults.baseURL, ''));
         }
     });
 }

 getWanikaniData = () => {
     this.getDataFromAllPages('/subjects?types=vocabulary').then(result => {
         console.log(result);
     });
 }
1
0

Abstract away the wanikaniaxios.get in another function to make recursion clearer.

Here's my badly formatted code (don't know how SF editor works) , feel to ask any questions if you have any. Happy coding.

getWanikaniData = () => {
  this.getDataFromAllPages("/subjects?types=vocabulary")
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err); // always put a .catch when you're using prmomises.
    });
};

getDataFromAllPages = async (url) => {
  // using async await;

  try {
    let arr = []; // i am assuming you'll improve upon what data structure you might want to return. Linked list seems best to me.

    const object = await waniKaniAxios.get(url);

    if (object.data.pages.next_url) {
      const laterData = await this.getDataFromAllPages(
        object.data.pages.next_url.replace(waniKaniAxios.defaults.baseURL, "")
      );
      arr = [...arr, ...laterData];
    } else {
      arr = [...arr, object];
    }

    Promise.resolve(arr);
  } catch (err) {
    Promise.reject(new Error(`Oops new wanikani error, ${err}`));
  }
};

FINAL UPDATE

Using part of the answer below I managed to get it working. Had to partially give up on the recursion aspect because I didn't how to make the promise resolve into data

Here's the final solution that I came up with

getDataFromAllPages = async (url) => {
  let results = {};
  try {
    //getting intial data
    const initialData = await waniKaniAxios.get(url);
    //using the intial data and mapping out the levels then saving it into results object
    results = this.mapOutLevels(initialData.data, results);
    //get the next page url
    let nextPageUrl = initialData.data.pages.next_url;
    //while there is a next page url keep calling the service and adding it to the results object
    while (nextPageUrl) {
      const laterData = await waniKaniAxios.get(nextPageUrl);
      nextPageUrl = laterData.data.pages.next_url;
      results = this.mapOutLevels(laterData.data, results);
    }
  } catch (err) {
    Promise.reject(new Error(`Opps new wanikani error, ${err}`));
  }
  return Promise.resolve(results);
};

getWanikaniData = () => {
  this.getDataFromAllPages("/subjects?types=vocabulary")
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    });
};
| improve this answer | |
  • Very much so, i bet if you refactor your code you'll find the solution by yourself (or post rhe refactored code back here). I recently learned this- functions should be as dumb as possible so that they can be tested individually. Read about single responsibility principal and DRY if you're into writing quality code. – Saurabh Agrawal May 28 at 4:21
  • This is probably better as a comment than an answer. – Scott Sauyet May 28 at 16:16
  • I think my confusion comes from me not fully understanding promises and then trying to implement that into a recursive function. I'm not getting how the promise plays into that – Baby Coder May 28 at 21:55
  • I have edited my answer @BabyCoder , please check it out. – Saurabh Agrawal May 29 at 1:42
  • laterData seems to be coming back null for some reason. After the end of the call chain the last gets saved into laterData but all other calls before it are coming back a null – Baby Coder May 30 at 1:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.