Skip to main content

I have written a little vue.js app. I need it to access more than 100 records in my table though. How do I do that?



Here is my code.var app = new Vue({


el: ‘#app’,


data: {


items: m]


},


mounted: function(){


this.loadItems();


},


methods: {


loadItems: function(){



                    // Init variables


                    var self = this


                    var app_id = "XXXXXXXXXXXXXXXX";


                    var app_key = "XXXXXXXXXXXXXXX";


                    this.items = s]


axios.get(


“https://api.airtable.com/v0/"+app_id+"/Donor Honor Roll?view=Grid%20view”,


{


headers: { Authorization: "Bearer "+app_key }


}


).then(function(response){


self.items = response.data.records


}).catch(function(error){


console.log(error)


})


}


}


})



Any help is appreciated.

The Airtable API uses the concept of pagination.


It returns at most 100 records in one call.



The response will contain an offset if there are more than 100 records. Include this offset in the next request’s parameters

If you use the js library provided by airtable (https://github.com/airtable/airtable.js ) it handles paging for you.

If you use the js library provided by airtable (https://github.com/airtable/airtable.js ) it handles paging for you.


Thanks, but I am not even sure where to start there. Not exactly a strong .js guy, but was able to follow a tutorial for vue.js to get info from my table. I see there is fetchNextPage(); but where would that go in my code now? I don’t want the user to have to click on anything to see the next record, I just want them all to be there.

Thanks, but I am not even sure where to start there. Not exactly a strong .js guy, but was able to follow a tutorial for vue.js to get info from my table. I see there is fetchNextPage(); but where would that go in my code now? I don’t want the user to have to click on anything to see the next record, I just want them all to be there.


@Stefan_Welsh openside is right but Airtable has really poor documentation for this so look at this file: https://github.com/Airtable/airtable.js/blob/master/test/test_files/index.html

Anyone figure this out? I know that this topic is old, but I am still trying to figure it out.


Thus far I have this for the first 100 data points:





any ideas on how to proceed? I don’t want to use the fecthNextPage() option on airtable.js

Anyone figure this out? I know that this topic is old, but I am still trying to figure it out.


Thus far I have this for the first 100 data points:





any ideas on how to proceed? I don’t want to use the fecthNextPage() option on airtable.js


@Tiago_Sanchez did you ever figure this out? I am trying to do this with axious and the rest url as well.

@Tiago_Sanchez did you ever figure this out? I am trying to do this with axious and the rest url as well.


Try this - How to paginate records in Airtable when using the API

This question is still open, without an answer:



I am not seeing that this question was answered (using Node.js and HTTP GET to paginate)



I have gone through every response, and nothing here is useful, that answers the question in those terms.



Looking at the article: “How to paginate records in Airtable when using the API” is not helpful. It is not directed at using HTTP GET and pagination.



Even if the answer were not specific to Node, but just GET, and params, would be sufficient.



I cannot map anything the article mentioned to the API examples given in the API documentation on how to paginate.



In addition the article is not a fully functional working example, it is missing pieces that would make it functional, and those pieces are essential in understanding a working example.





I have an axios GET call to fetch the first 100 records successfully (or up to 100 using the param: ?maxRecords=100)



There is nothing that I can see in the response that indicates an offset to use on the next call.





  1. Where do I get the offset? ( I need it for the last response, to specify how many to get? )


  2. How do I know when there are no more records, when doing repeated GET’s?




So the question is:



Is there a fully working example anywhere (axios / node), using GET to paginate, fetching all records from a table (100 at a time, until there are no more)?





A good example, using axios.get to loop, and process each batch of 100 when it comes back, would be extremely helpful.



Thank you,

This question is still open, without an answer:



I am not seeing that this question was answered (using Node.js and HTTP GET to paginate)



I have gone through every response, and nothing here is useful, that answers the question in those terms.



Looking at the article: “How to paginate records in Airtable when using the API” is not helpful. It is not directed at using HTTP GET and pagination.



Even if the answer were not specific to Node, but just GET, and params, would be sufficient.



I cannot map anything the article mentioned to the API examples given in the API documentation on how to paginate.



In addition the article is not a fully functional working example, it is missing pieces that would make it functional, and those pieces are essential in understanding a working example.





I have an axios GET call to fetch the first 100 records successfully (or up to 100 using the param: ?maxRecords=100)



There is nothing that I can see in the response that indicates an offset to use on the next call.





  1. Where do I get the offset? ( I need it for the last response, to specify how many to get? )


  2. How do I know when there are no more records, when doing repeated GET’s?




So the question is:



Is there a fully working example anywhere (axios / node), using GET to paginate, fetching all records from a table (100 at a time, until there are no more)?





A good example, using axios.get to loop, and process each batch of 100 when it comes back, would be extremely helpful.



Thank you,


here is a good starting point, the only thing missing is what the for loop would look like, how to exit.



function processRecords() {


    console.log('processRecords()');


    // do stuff


}





const processTable = async () => {


    const url = `https://api.airtable.com/v0/` + atApiBaseKey + `/` + atTableName;


    const headers = {


        'Authorization': "Bearer " + atApiKey,


        'Content-Type': "application/json"


    };





    try {


        let offset = 0;    // no initial offset


        let params = {


            maxRecords: 100,


            offset: offset


        };





        /**


         * how to loop here over await axios.get() ?


         *


         * what would a for loop look like here, incrementing offset by 100


         * each time?


         *


         * and how would the loop exit?


         *


         */





        await axios.get(url, {params: params, headers: headers})


            .then((response) => {


                processRecords(response.data.records);  // process 100 records





                //console.log(response.data);


                //console.log(response.status);


                //console.log(response.statusText);


                //console.log(response.headers);


                //console.log(response.config);


                console.log('')


            });


    } catch (error) {


        console.error(error)


    }


};

here is a good starting point, the only thing missing is what the for loop would look like, how to exit.



function processRecords() {


    console.log('processRecords()');


    // do stuff


}





const processTable = async () => {


    const url = `https://api.airtable.com/v0/` + atApiBaseKey + `/` + atTableName;


    const headers = {


        'Authorization': "Bearer " + atApiKey,


        'Content-Type': "application/json"


    };





    try {


        let offset = 0;    // no initial offset


        let params = {


            maxRecords: 100,


            offset: offset


        };





        /**


         * how to loop here over await axios.get() ?


         *


         * what would a for loop look like here, incrementing offset by 100


         * each time?


         *


         * and how would the loop exit?


         *


         */





        await axios.get(url, {params: params, headers: headers})


            .then((response) => {


                processRecords(response.data.records);  // process 100 records





                //console.log(response.data);


                //console.log(response.status);


                //console.log(response.statusText);


                //console.log(response.headers);


                //console.log(response.config);


                console.log('')


            });


    } catch (error) {


        console.error(error)


    }


};

ANSWER: After some experimenting, here is the Node.js / GET solution, that answers the above.



Do not set GET param ?maxRecords, otherwise there will be no param offset returned in the first response.



offset is not an integer, as would be expected (like start at 101), but rather is an Airtable row identifier (character string).



To loop, and get all records, this works:



function processRecords(records) {


    console.log('processRecords()');


	for (let record of records) {


		const airtable_id = record.id;


		const fields = record.fields;


		// do stuff with fields: field['<key>']


	}


}





function getParams(offset) {


    const params = {


        offset: offset


    };


    return params


}





const processTable = async () => {


    const url = `https://api.airtable.com/v0/` + AT_API_BASE + `/` + AT_TABLE_NAME;


    


	const headers = {


		'Authorization': "Bearer " + atApiKey,


        'Content-Type': "application/json"


    };


	


    let fetchCount = 0;


    try {


        let offset = 0;    // no initial offset, explicitely set to 0





        while (true) {


            const params = getParams(offset);


            console.log('fetchCount:', fetchCount);


            await axios.get(url, {params: params, headers: headers})


                .then((response) => {


					fetchCount += response.data.records.length;


                    offset = response.data.offset;


                    processRecords(response.data.records);





                    //console.log(response.data);


                    //console.log(response.status);


                    //console.log(response.statusText);


                    //console.log(response.headers);


                    //console.log(response.config);


                });


            if (typeof offset === 'undefined') {


                break;


            }


        }


    } catch (error) {


        console.error(error)


    }


    console.log('fetchCount:', fetchCount);  // print final # records fetched


};


If there are improvements upon this in any way, whether it is directly related to the Airtable API or with Node (code or structure, async/await), or any other issues, please share.



Output:



fetchCount: 0


fetchCount: 100


fetchCount: 200


fetchCount: 300


fetchCount: 400


fetchCount: 500


fetchCount: 600


fetchCount: 700


fetchCount: 800


fetchCount: 900


fetchCount: 1000


fetchCount: 1024



Hi all, now airtable return in the respond with the first 100 records with an offset, just used it to the second call with an async function


let resp = [];


try {


     do{


    let params = {


            offset: ""


        };


    await axios.get(url, {params:params, headers:headers}).then((response) => {


        for (let item of response.data.records)


          resp.push(item);


        if(response.data.offset)


         params.offset = response.data.offset;


        else


         params.offset = "";


    });


    }while(params.offset !== "");


} catch (error) {


        console.error(error)


} 





//you will get all the rest of records.

ANSWER: After some experimenting, here is the Node.js / GET solution, that answers the above.



Do not set GET param ?maxRecords, otherwise there will be no param offset returned in the first response.



offset is not an integer, as would be expected (like start at 101), but rather is an Airtable row identifier (character string).



To loop, and get all records, this works:



function processRecords(records) {


    console.log('processRecords()');


	for (let record of records) {


		const airtable_id = record.id;


		const fields = record.fields;


		// do stuff with fields: field['<key>']


	}


}





function getParams(offset) {


    const params = {


        offset: offset


    };


    return params


}





const processTable = async () => {


    const url = `https://api.airtable.com/v0/` + AT_API_BASE + `/` + AT_TABLE_NAME;


    


	const headers = {


		'Authorization': "Bearer " + atApiKey,


        'Content-Type': "application/json"


    };


	


    let fetchCount = 0;


    try {


        let offset = 0;    // no initial offset, explicitely set to 0





        while (true) {


            const params = getParams(offset);


            console.log('fetchCount:', fetchCount);


            await axios.get(url, {params: params, headers: headers})


                .then((response) => {


					fetchCount += response.data.records.length;


                    offset = response.data.offset;


                    processRecords(response.data.records);





                    //console.log(response.data);


                    //console.log(response.status);


                    //console.log(response.statusText);


                    //console.log(response.headers);


                    //console.log(response.config);


                });


            if (typeof offset === 'undefined') {


                break;


            }


        }


    } catch (error) {


        console.error(error)


    }


    console.log('fetchCount:', fetchCount);  // print final # records fetched


};


If there are improvements upon this in any way, whether it is directly related to the Airtable API or with Node (code or structure, async/await), or any other issues, please share.



Output:



fetchCount: 0


fetchCount: 100


fetchCount: 200


fetchCount: 300


fetchCount: 400


fetchCount: 500


fetchCount: 600


fetchCount: 700


fetchCount: 800


fetchCount: 900


fetchCount: 1000


fetchCount: 1024



Indeed, it cannot be an integer mapping to sequential record items because Airtable supports Queries by View and as you know, views can contain all sorts of filtering, ergo, it requires a logical mapping of data, not a numerical mapping.

why is something like this so complicated…?

why is something like this so complicated…?


With The official Airtable JavaScript library you can now use all() instead of having to manually paginate:



    const data = await base(tableName)


      .select({ view: viewName })


      .all();


Reply


Terms & Conditions