AngularJS Controller managing the entry field

I am still learning AngularJS and attempting to retrieve user input from a text box to use for querying an endpoint and displaying the result in another text box. Here is a preview of the user interface:

https://i.sstatic.net/zXCgQ.jpg

Here is the HTML code for the UI:

        <div hidden id="userData">
            <label style="font-size: medium">Enter Input *</label>
            <input name="userData" class="form-control" ng-model="request.userData">
           <div ng-message="required">This field is required</div>
            </div>
            <div class="row form-group">
                <button type="button" class='btn btn-success' ng-click="queryData()">Query</button>
            </div>
            <input name="userName" class="form-control" ng-model="request.userName">
            <div ng-message="required">This field is required</div>
            </div>

Within the Controller, I am working on retrieving the user input (userData) to use in an Odata endpoint as a query parameter:

    $scope.queryData = function () {

        var sList = getAppData.getCData(`STR?Bar eq '${$scope.request.userData}'`, `Basic ${$scope.key}`)
       ........             
            };

However, the above code is not returning any data to sList. Therefore, I attempted to store the user input in a variable and use it in the query:

   $scope.queryData = function () {
        var userEntered = ${$scope.request.userData };
        var strainsList = getAppData.getCData(`STR?Bar eq '`+userEntered+`'`, `Basic ${$scope.key}`)
       ........             
            };

Unfortunately, this method did not work during debugging. I found that hardcoding the input, as shown below, does work:

var sList = getAppData.getCData(`STR?Bar eq '1234'`, `Basic ${$scope.key}`)

Can anyone provide insight on how to successfully retrieve user input for the Button function?

Answer №1

After reviewing your mention of the hard-coded data, the following solution should suffice.

When faced with code confusion, always make sure to bifurcate it for better readability, using \ as an escape sequence.

let paramOne = `STR?Foo eq \'${$scope.request.data}\'`;
let paramTwo = `Basic ${$scope.token}`;
let dataList = retrieveData.getData(paramOne, paramTwo);

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

The presence of "href="#"" is causing a disruption in the Angular

Recently, I set up a route in my Angular project like this: var app = angular.module("MSL", []) .config(function($routeProvider, $locationProvider){ $routeProvider .when("/dev.html", { redirectTo: "/template1" }) . ...

How to use React MUI Checkbox to set the checked value as false

I'm encountering an issue with the React MUI - Checkbox component. On my site, I have a checkbox linked to a handler that targets a REST API endpoint. This endpoint sets a boolean flag for the user in the database on a POST request and returns the boo ...

How to incorporate text into the white circle object using three.js

View the current state of my project on this JS Fiddle. I am looking to incorporate rotating text, whether in 3D or 2D. The text should rotate in sync with the white circle. I am open to any method that achieves the desired outcome. Below is the provided c ...

Is there a way for me to use an ajax xmlhttprequest to submit all the selected values from my radio buttons?

Here's the situation: I have four input forms [A-D] and I have selected options A and B. I want to transfer this information to another page, but I'm not sure how to do it. I've tried searching for tutorials on AJAX, but most of them focus ...

Embrace the presence of null values on the client side

When utilizing the code below, I can determine the location of logged-in users. However, there are some users who do not have a specific location assigned. For example, Administrators are common for all locations. In such cases, how can I set it so that ...

Remove child elements in Jquery that do not match the specific numbers saved in the array

I've got this array: var numbersArray = [1, 2, 4, 5] and also an unordered list in HTML <ul> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> <li> item 5 ...

How to use node.js to add JSON data to a JSON file without using an array?

I'm trying to update a JSON file without using an array with FS. The desired format of the file should be: { "roll.705479898579337276.welcomemessage": "There is a welcome message here", "roll.726740361279438902.welcome ...

Display JavaScript and CSS code within an Angular application

I am working on an Angular 1.x application (using ES5) where I need to display formatted CSS and JS code for the user to copy and paste into their own HTML file. The code should include proper indentations, line-breaks, etc. Here is a sample of the code: ...

Babelify is having trouble transpiling JSX code within the node_modules directory

I have successfully set up Babelify to transpile jsx code to js, and I've created node_modules before, allowing me to link them without a specific file path, just the package name. However, when I add jsx code within my node_module code, babelify flag ...

Having issues with your JQuery code?

I am attempting to locate a cell within a table that contains the class 'empty'. My goal is to then utilize a code snippet to obtain the id (cell number) and determine which cells are adjacent to it. As part of my test, I am experimenting with t ...

Retrieve the chosen date from a DatePicker using a Javascript function

Is there a way to retrieve the user-selected date using a JS function? I attempted this method: var test = $("#datepicker").datepicker( 'getDate' ); However, when I display it with an alert, it shows [object object] instead of the date. This ...

Different boolean variable assigned to every item in v-for loop

I am working on creating a custom play/pause button for my audio elements, and here is how I have implemented it: <div v-for="(post, p) in post_list"> <!-- ... --> <!-- ... --> <!-- ... --> <v-avatar v-i ...

Enhance filtering capabilities in ng-repeat by adding controls

After utilizing ng-repeat to display some JSON data, I have incorporated form controls to filter output data from another JSON file. Here is a simplified example: First JSON data: var technologies = [ {"id":"5", "slug":"mysql", "label":"MyS ...

Passing a list of objects containing lists in MVC3

Is it possible for me to send an array of objects, each containing arrays, from JavaScript to a MVC action result method? Essentially, I have a KeyValuePair with keys as arrays of strings and I need to return a list of these KeyValuePairs. In my code, I ha ...

Node.js routing at the secondary level modifies the main directory path

In my current web project, I am incorporating both Angular JS and Node JS simultaneously. To handle routing in Angular JS, I have implemented the following code: app.config(function($routeProvider,$locationProvider) { $routeProvider .when("/expert/:exper ...

Understanding the reverse order of numbers displayed with while loop and innerHTML

function doItAgain() { var loopCount = 5; while(loopCount > 0) { var target = document.getElementById("target"); target.innerHTML = "LoopCount: " + loopCount + "& ...

Using PHP to validate a read-only textbox

I am trying to implement validation on a Datepicker that is set to readonly, but I am facing issues with my current code. Can someone please assist me? Below is the JavaScript code used for error trapping: <script type="text/javascript"> $(func ...

Utilizing jQuery AJAX to efficiently handle branching based on the result received

I've successfully set up my first AJAX call with jQuery. The only thing left to do is to check the result from the PHP page for any database errors and display an error message if necessary. Here's the current Javascript code: <script type=" ...

What is the best way to utilize variables in order to style this image inside a selector?

Struggling with adding dynamic styling to an image inserted into a div through a selector. Despite successful testing of the style changes, I am stuck on how to assign variable values for the properties. Various syntax attempts have failed so far. functi ...

When clearInterval is used to stop a setInterval, it will not automatically restart if reset with setInterval

I am facing an issue with a countdown timer that I have created using setInterval in JavaScript. The timer is supposed to countdown from one minute at one second intervals. However, when I click the "start" button, it starts the countdown but if I click an ...