What is the best way to retrieve all information from GitLab API using Axios?

I am looking to retrieve data from all the projects stored on my GitLab server. As I understand, GitLab usually displays a default of 20 projects per page, so I need to adjust the setting to show more projects at once:

https://gitlab-repo.com/api/v4/projects?per_page=100

This results in the following axios code:

const url='https://gitlab-repo.com/api/v4/projects?per_page=100'
const vm = new Vue({
el: "#app",
data: {
    results: [],
    loading: true,
    errored: false
},
mounted() {
    axios
        .get(url)
        .then(response => (this.results = response.data))
        .catch(error => {
            console.log(error)
            this.errored = true
        })
        .finally(() => this.loading = false)
}
})

The challenge is that GitLab can only display up to 100 projects per page, and I have more projects than that.

I have considered adding a condition regarding the number of projects in the params section of the axios get function but am unsure how to execute that.

Is there a way for me to specify in my axios request that if the number of projects exceeds 100, I want to retrieve the additional data from the subsequent page(s)?

javascriptvue.jsaxiosgitlab-api

Answer №1

To begin, start by creating a function that can request a specific page, similar to the following:

function fetchPage(page) {
  let url = `https://gitlab-repo.com/api/v4/projects?per_page=100&page=${page}`;
  return axios
        .get(url)
        .then(response => (response.data))
}

If your environment supports async/await, you can then proceed like this to continuously request pages until the number of results is less than 100:

let resultCount = 100;
let allResults = [];
let currentPage = 1;
while (resultCount === 100) {
  let newResults = await fetchPage(currentPage);
  currentPage++;
  resultCount = newResults.length;
  allResults = allResults.concat(newResults);
}

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

javascript conceal other sections upon hovering

There are 4 list items (<li>) that I want to use as triggers for linked images. In this project, I am using vanilla JavaScript as jQuery is not allowed. Below is the code snippet: var children = document.querySelectorAll('#resistorContent > ...

javascripthtmlhideonmouseover

An array filled with unique and non-repeating elements

I want to display random country flags next to each other, making sure they do not match. However, my specific case requires a unique solution for dealing with arrays: function displayRandomFlags() { var flagurls = ["ZPlo8tpmp/chi","cJBo8tpk6/sov","QyLo ...

javascriptarrays

Trouble encountered while trying to show information on Tooltip using AngularStrap

I've been attempting to show some information in a Tooltip, but all I see is the Title displayed like this: Below is the HTML code where I'm calling it: <button class="btn btn-primary" type="bu ...

javascriptangularjs

How can a JavaScript function communicate with a code behind method?

Currently, I am trying to implement a JavaScript function for an HTML img click event on an aspx page. Additionally, there is a server method in the code behind page that I need to call from the JavaScript function without any parameters whenever the user ...

c#javascriptasp.net.netscriptmanager

Do not fulfill the promise until all the images have finished loading

Below is the intended process: Iterate through a collection of img tags Retrieve each tag's src URL Convert it to a base64 encoded string using an HTML 5 canvas Once all images have been converted, resolve the promise and call the callback function ...

javascriptjqueryimagebase64

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

javascriptjqueryhtmlajaxevents

What is the best way to save the output of a middleware in express js so that it can be conveniently accessed by the rest of the

Currently, I am working with a middleware that returns an object. My goal is to save this object so that other parts of the application can utilize the data it contains. How can I achieve this? This snippet is from my app.js file: import { myMiddlewareFun ...

javascriptnode.jsexpress

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

Presently, I am in the process of developing a small educational project using HTML5, CSS, JS and AngularJS. Hiccup: Loading an AngularJS Directive in my index.html file Error code [1] - Local browser Error: Access to restricted URI denied Various resp ...

javascripthtmlangularjsfilestructure

What steps do I need to take to adjust this function based on the timezone?

Is there a way to retrieve the current time based on a specific timezone of my choice? let getCurrentTime = () => { var today = new Date(); var hh = String(today.getHours()) var mm = String(today.getMinutes()) //January is 0! var ss = ...

javascriptnode.jsexpress

What could be causing React onclick events to not trigger when wrapped within a Vue application? (No additional libraries)

As I dive into the world of combining React and Vue components, I encountered an interesting challenge... const RootTemplate = () => { return ( <div id="vue-app"> ... <IconButton color="inherit" onClick={thi ...

javascriptreactjsvue.js

Error encountered with Content Security Policy while utilizing react-stripe

I am currently in the process of developing a React application that incorporates Stripe payments utilizing the @stripe/react-stripe-js (version "^1.9.0") and @stripe/stripe-js (version "^1.32.0") npm packages. While the payments are functioning correctly, ...

javascriptreactjsstripe-paymentscontent-security-policy

What is the best method for packaging a React component library?

Currently, I am working on developing a React component library that I aim to distribute via npm to reach a wide audience. In my development process, I utilize webpack and babel for packaging and code processing. However, as a newcomer to webpack, I am uns ...

javascriptreactjsnpmwebpackbabeljs

Tips on invoking a mixin within a Jade template showcased in a Node/Express endpoint

I'm currently developing a component that I plan to use multiple times on a website through a Jade template. This is how my route is set up: router.get('/', function(req, res, next) { res.render('indicators',{category:"", num ...

javascriptnode.jspugmixins

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

javascriptjqueryhtml

Transferring a file using a form from Nuxt to a Node server via Nodemailer

I am currently working with a form in Nuxt.js that looks like this: <v-form v-if="displayForm" ref="form" v-model="valid" enctype="multipart/form-data" lazy-validation> <v-flex xs12 md6 sm12> <v-text-field v-model="linkOri ...

node.jsvue.jsnodemailervuetify.jsnuxt.js

How come this isn't growing the way I had hoped for?

Currently, I am working on a small jQuery script that is designed to fetch and print a specific month from a PHP file. Here is my code snippet: var count = 0; $(".nextMonth").click( function(event) { event.preventDefault(); count++; $("#r ...

phpjavascriptjqueryajaxget

Tips for initiating and terminating the evaluation of a condition at regular intervals using JavaScript

I'm currently working on a JavaScript application where I need to achieve the following: Periodically check every 5 seconds to see if there is an element with the 'video' tag on the page. Once an element with the 'video' tag ...

javascriptjqueryhtmlvideo

What causes the difference between object[key] and Object.key in JavaScript?

After running the following code snippet, I observed that "typeof object[key]" is displaying as a number while "typeof object.key" is showing undefined. Can anyone explain why this unusual behavior is occurring? var object = {a:3,b:4}; for (var key in o ...

javascriptobject

Shifting attention from one input to another by utilizing a barcode scanner

Utilizing a barcode scanner, I am inputting data into the fields of a webpage. The form is set up with autofocus on the initial input field. However, upon entering the first barcode in the opening field, the focus should shift to the following input field. ...

javascriptjquerybarcode-scanner

Tips for Disabling ML5 Posenet

Looking to halt Posenet after completing app task private sketch(p: any) { p.setup = () => { this.poseNet = ml5.poseNet(p.createCapture(p.VIDEO), { outputStride: 8 }); this.poseNet.on(&apos ...

javascripttypescriptp5.jsml5.js