Creating an interactive API endpoint in AngularJS for a DreamFactory stored procedure just got easier with these simple steps

If I am using a factory/service to access my API in DreamFactory.

FoundationApp.factory('testAPI', function($resource, ChildID) {
    return $resource('http://Domain.com/rest/RemoteDB/_proc/TimeLog_Checkin(:ChildID)/?app_name=App&fields=*', {ChildID: @ChildID}, {
        update: {
            method: 'PUT'
        }
    });
})

How can I modify the ChildID using a control with a GET function to make an API call with a specific ChildID entered by the user?

.controller('testCtrl', ['$scope','$resource','$routeParams','testAPI', function($scope,$resource,$routeParams,testAPI) {
    console.log("Welcome to Test");
    $scope.TestFunction = function() {
        test.get($scope.ChildID);
    };
}])

The child id is obtained from the HTML document. Here is the code for that.

<div class="well">
    <button class="btn btn-default" ng-click="TestFunction()">Get all Clients</button>
    <div>
        <input type="text" class="form-control" ng-model="ChildID">
    </div>
</div>

I have done some testing and successfully made the call by replacing ChildID in the URL with the desired ChildID.

http://Domain.com/rest/RemoteDB/_proc/TimeLog_Checkin(1)/?app_name=App&fields=*

However, I need a dynamic URL to accommodate user input.

I have researched various approaches to implementing this idea, but none of the examples quite fit my situation to help solve the problem.

Any assistance would be greatly appreciated as I have spent several hours working on this issue.

Answer №1

Although $resource is a robust tool, it may sometimes prove to be either overwhelming or not sufficiently adaptable for your specific needs. However, in this particular scenario, it's surprisingly straightforward. All you have to do is

testApi.update({childId:"childId", ....})

or

var api = new testApi({childId:"id"}); 
api.otherProp="value"; 
api.$update();

Answer №2

To create a URL, simply combine the value of `ChildId` with the base url

FoundationApp.factory('testAPI', function($resource, ChildID) {
     return $resource('http://Domain.com/rest/RemoteDB/_proc/TimeLog_Checkin(' + ChildID + ')/?app_name=App&fields=*', {ChildID: ChildID}, {
         update: {
             method: 'PUT'
         }
     });
})

I removed the @ sign as I am unsure of its purpose

Answer №3

It seems like you're not utilizing any functions to retrieve parameters. Here's a suggested approach: You can make a call similar to

data = testAPI.getData($scope.ChildID)

FoundationApp.factory('testAPI', function($resource) {
 return { 
          getData: function(ChildID) {
                    return $resource('http://Domain.com/rest/RemoteDB/_proc/TimeLog_Checkin(' + ChildID + ')/?app_name=App&fields=*', {ChildID: ChildID}, {
                     update: {
                               method: 'PUT'
                             }
                     });
          }
       }
})

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

Implementing an Ajax function for handling multiple button clicks

So, here's the situation - I've inherited a form with two buttons that inexplicably have the same name and id (seriously, don't ask me why, I didn't design this form haha). I'm attempting to utilize the Ajax .click function to trig ...

Issue with Vue Router not rendering components after dynamically importing them

I am facing an issue with vue-router while trying to register components dynamically. When I use hardcoded code, the router functions properly. However, when I load my routes dynamically, it fails to render the component. The component file is being impor ...

What could be causing this JS/jQuery to affect numerous inputs at once?

Everything is working smoothly with the code in the 'phone' input field. It formats the phone number correctly as the user types. However, there seems to be an issue with the event listener being added to another input named 'twofactor' ...

Navigating through different states and managing the URL manually can be a breeze with AngularJS

In my current setup using the meanjs stack boilerplate, I am facing an issue with user authentication. When users log in, their state remains 'logged-in' as long as they navigate within the app starting from the base root URL '/'. This ...

Access previous value in Vuejs onchange event

In the code snippet below, how can I retrieve the previous value of the model that has been changed, specifically the age in vuejs? var app = new Vue({ el:"#table1", data:{ items:[{name:'long name One',age:21},{name:'long name Two&a ...

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

Navigational states in Angular application can be nested without a parent state using Angular

It has come to my attention that my current objective may not be compatible with AngularUI Router. However, I am sharing it here in hopes that someone can offer a solution, prove me wrong, or suggest an alternative approach to achieve the same result. The ...

Can you explain the concept of binding and unbinding in jQuery?

Can you explain the concepts of binding and unbinding in jQuery in simple terms for someone who learns slowly? ...

Ways to terminate all AJAX requests within a for loop

Is there a way to cancel all AJAX requests that are being handled by a for loop? var url = ["www.example.com","www.example2.com",....]; for (var i = 0; i < url.length; i++) { var XHR = $.get(url[i], function(data) { //do something }); } I attemp ...

Retrieve data via AJAX using a combination of JavaScript and ASP

Can someone help me figure out how to retrieve the value of value1 on my server-side ASP using Javascript? I am using this Ajax code but unsure of how to do it. In my serverside code, I would like to have something like <% var newdata = value1 (which ...

What is a more effective way to showcase tab content than using an iframe?

I currently have a webpage set up with three tabs and an iframe that displays the content of the tab clicked. The source code for each tab's content is stored in separate HTML and CSS files. However, I've noticed that when a tab is clicked, the ...

Troubleshooting problem with dynamic filter in AngularJS using ngTable

I am trying to implement a filter for my ngTable. Initially, in the root of the controller, outside of any function, I set the filter like this: $scope.filters = { nomSociete: 'test' } and then later on I reload the tableParamsContacts lik ...

Is it possible to assign a property value to an object based on the type of another property?

In this illustrative example: enum Methods { X = 'X', Y = 'Y' } type MethodProperties = { [Methods.X]: { x: string } [Methods.Y]: { y: string } } type Approach = { [method in keyof Method ...

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

List being dynamically split into two unordered lists

Could someone help me with a JS/jQuery issue I'm facing? My challenge is to populate a modal when a link is clicked. Upon clicking the link, a UL is created from a data attribute. However, the problem is that only one UL is being generated whereas I ...

What could be causing the input field state to remain static even as I type in the MUI textField?

In my React.js component, I am facing an issue where the textField is not updating when I try to type anything. Upon debugging, I discovered that when the first character is entered, the component re-renders and loses its previous state, causing the textF ...

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...

What could be causing my list of files to not properly append to FormData?

I have been working on this issue for the past three days. Despite trying various solutions from different sources, including seeking help from other websites, I am still unable to resolve it. My current challenge involves sending a post request with a Fo ...

JavaScript Function to Retrieve URL Parameter in PHPIn this tutorial

I'm currently working on an HTML5 game where each level has its own dedicated HTML page. The results of each level are saved in a JavaScript variable. My question is, how can I pass this information to the next page using the URL? I was considering ...

Problem with uploading special characters (čžćšđ) in Uploadify

I've encountered an issue with uploading images using . When I upload images with characters such as (čžćšđ) like "čžćšđ.jpg", the characters get corrupted and the uploaded image ends up looking like čćžšđ.jpg. How can I pr ...