Calling and api endpoint in radsystems

Sample Codes
1

this will apply to all radsystems that use vue as a frontend that include ! Noderad,ASp.net,VueRad,PrimeVue this will be how you access your endpoints in all of them!

assuming you have a created an endpoint that shows a list of all users and you may want to call in in the front end of your app or maybe you have an external api that you are querying data from that is not from your app! well this will be easy!! all you need to do is call the api !
there might be two situations where this would be used!

  1. a direct call-this doesnt have any additives;
  2. a parametised call-this will need you to pass some values to your endpoint

we start with the first one!

assume we have an endpoint available at https://example.com/api/users/getall to access this we only need the controller name and the name of the endpoint
that is users/getall.Now to write our api calling code
this.$api.get( **here we write our link which is users/getall** ) note how those speech marks look like this ``. not ’ ’ and not " "

export default {
data() {
            return {
            	//we write the value that will host our response.lets call it resp
                       resp:[],//its an array
			}
		},
async mounted() {
//we only add this api call in the mounted if we want it to be executed
// on page load! if you want it to be
 //executed on button click you will need to add the code inside a function in the methods
       this.$api.get(`users/getall`).then((response)=>{
       let results =  response.data;//here is where we get our response back from the api
          //we now attach the response to the value response we
// created in the data obj to access it we 
           //must assign the (this.) prefix to it
     this.resp = result;
},
(response)=>{
   //we now handle what will happend when the call is over it could be anything! you could even call 
  //another api here to do something eg! stop loading, send email! anything!
this.loading = false;
}
);

}

and thats all ! now remember our response will be inside the array resp which we created ! now we need to display it in the front end so we can see it at work! just go anywhere in your frontend and add it like this {{this.resp}} or just {{resp}} and you should see your data! however based on the structure of your json you might want to list it or do something else ! this you can read about if from vue js documentation but the idea would be to do something like this

<div v-for="item in resp" :key="item.someUniqValue">
<ol>
<li>{{item.data_From_api</li>
</ol>
</div>

where someUniqValue will be a value in your response that does not repeat itself so you can identify a unique record and where data_From_api is the actual data you want to display in your frontend from the api! if you have any questions leave them here! happy coding

2 Likes