Sending URL parameter to Rest API via Angular's $HTTP module

Having an issue with sending URL parameters to a rest method using an angular optimized HTML page.

The code for my rest method is as follows:

router.get("/url/id/:urlid",function(req,res){
    var query = "SELECT urlID AS libraryid, "
                + "URL AS libraryitem "
                + "FROM ?? "
                + "WHERE active = 1 "
                + "AND ?? = ? "
    whereClause = ['urls', 'urlid', req.params.urlid];
    query = mysql.format(query,whereClause);
    connection.query(query,function(err,rows){
        if(err) {
            console.log("Rest Call Error");
            res.json({"Error" : true, "Message" : "Error executing MySQL query", "Query" : query});
        } else {
            console.log("Rest Call Success", rows);
            res.json({"Error" : false, "Message" : "Displayed the url  "+req.params.urlid, "Query" : query, "URLs" : rows});
        }
    });

When calling the rest method directly, results are:

{
  "Error": false,
  "Message": "Displayed the url  5",
  "Query": "SELECT urlID AS libraryid, URL AS libraryitem FROM `urls` WHERE active = 1 AND `urlid` = '5' ",
  "URLs": [
    {
      "libraryid": 5,
      "libraryitem": "url"
    }
  ]
}

The Controller section includes:

app.controller("UrlByIDController", function ($scope, $http) {
$http.get('/api/url/id/{{urlid}}')
.then(function(data) {
  console.log("URl loading", data)
  $scope.links = data['URLs'];
})
.catch(function(response) {
  console.error('Loading URL error', response.status, response.data);
})
.finally(function() {
  console.log("finally finished loading urls");
});
});

For the HTML template:

<div class="form-group">
    <label for="txtURL" class="control-label col-xs-3">URL</label>
    <div class="col-xs-3" ng-controller="UrlByIDController" >
      <input  type="text" 
              id="txtURL" 
              class="ng-valid ng-dirty" 
              ng-model="formData.txtURL" 
              value="{{links.libraryitem}}" 
              placeholder="URL of Ad" />
    </div>
  </div>

During debugging, found that the id value passed to the rest method is the phrase 'urlid'. It seems like there might be a basic mistake that I am overlooking.

Answer №1

Trying to use "{{urlid}}" in your Angular Controller won't work since this syntax is meant for your HTML Template only.

It seems like you haven't specified how the urlid value is retrieved in your Controller. One way to access urlid could be by using $scope. However, you need to assign a value to it first:

$http.get('/api/url/id/' + $scope.urlid)

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

Struggling to implement sparklines for real-time data in the AngularJS adaptation of the SmartAdmin template

Currently, I am embarking on a project that involves utilizing the AngularJS version of the SmartAdmin Bootstrap template foundhere. Within this project scope, I am required to integrate sparklines into various pages. I have successfully implemented them ...

Reassemble the separated string while skipping over every other element in the array created by splitting it

Currently, I am working on the following URL: demo.example.in/posts/0ewsd/13213 My goal is to extract the hostname (demo.example.in) and the path (posts/0ewsd/13213) from this URL. urlHost = 'demo.example.in/posts/0ewsd/13213'; let urlHostName ...

Transforming divs into a dropdown to mimic the functionality of a select or combo

I have multiple divs contained within a wrapper div, each representing the same entity as shown in image 1. https://i.sstatic.net/iNjqB.jpg When I click on "Select 1" or "Select 2", I need to trigger a dropdown list that allows me to select an option and ...

Display information on the console from any location

I'm working on a Node.js project where I need to display text at specific locations, such as the top right corner. Is there a Node.js module available that can help me achieve this? Something like: var displayModule = require('display_module&ap ...

Having trouble with page reload when implementing Angular Ui Router in Html5 mode with AngularJS?

Within my Angular app, I have implemented Angular UI Router and made use of HTML5 mode to eliminate the "#" from my URLs by utilizing the $locationProvider in the configuration. angular.module('myApp', ['ui.router']) .config(function( ...

Create a unique marker using the jsartoolkit5 library

I am working on a project involving Augmented Reality using jsartoolkit5 along with Three.js, and I am interested in incorporating a custom marker similar to the one demonstrated in this example. The markers are loaded into the project using the following ...

Exploring the power of media query breakpoints within Chakra UI's global styles

Trying to incorporate a media query breakpoint in Chakra UI global styles has presented some challenges. An attempt was made using template literals for property names, but it was discovered that this approach is not supported: import { ChakraProvider, e ...

Populate a table dynamically using JavaScript based on existing cell values

I am currently working on filling an HTML table based on the contents of its left cells. The code below creates a table that is populated with variables: <table id="myTable" ></table> <script> var rightcell = [{name : "Name ...

Step-by-step guide on updating the home page content in angular4 upon signing up with the user page

The home page and user page contents are both displayed on the home page itself. In the header section, I have a SignIn and SignUp form from the home.html file. Additionally, there is another Signup form from the user page. This form includes 3 buttons: on ...

What is the best way to send a POST request with axios in a React application?

Having trouble with the axios post request. When I press the Button, nothing seems to happen. Supposedly, the data I input into the fields should be submitted to the API. However, there's no redirection or any indication that the submission is success ...

How to ensure NodeJS waits for a response before returning a value

I've come across a seemingly simple problem that I just can't seem to solve. My current project involves working with an asynchronous messaging bot. In this particular scenario, the bot is supposed to react to an event by calling a Restful API a ...

Tips for preventing clicks from registering beneath a div popup?

Whenever I activate my popup, the content underneath remains clickable despite not being visible. The CSS for my popup div is as follows: #wrapper { position: fixed; border-top: 0px; border-bottom: 0px; z-index: 1002; overflow: hidden ...

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

Identifying a specific item within an array

Can someone guide me on how to manipulate a specific object within an array of objects? For example: var myArray = [ {id: 1}, {id: 2}, {id: 3}, {id: 4} ] // Initial state with the 'number' set as an array state = { number: [] } // A functio ...

How can you prevent multiple instances of JavaScript objects from being disposed of after they have completed their task?

I'm facing an issue with the code snippet below: $(document).ready(function() { $('.container').ready(function() { var v = new Video($(this)); v.load(); }); }); I'm trying to prevent the object 'v&apos ...

Set up an event listener for when geolocation permission is approved

My Setup: I've written some basic code snippet below: const onSuccess = () => { console.log('success'); } const onError = () => { console.log('error'); } navigator.geolocation.getCurrentPosition(onSuccess, onError) ...

I could use some assistance in creating arrays from a JSON file that contain identical keys

Here's the data in JSON format: [ { "id": 1, "picture": "image-hero-paramour.jpg", "title": "Project Paramour", "subheading": "Project made for an art museum near Southwest London. Project Paramour is a stateme ...

The MUI Autocomplete filterOptions is not effectively filtering out all options as expected

Hey there! I'm facing an unusual situation with my Autocomplete feature, which has been heavily customized to meet certain restrictions and requirements. The issue I am encountering is related to filtering. Despite successfully filtering the results ...

Generate a configuration file that allows for the reading and storage of modifications

Is there a way to create a configuration file (JSON) on the local file system using JavaScript where I can write and modify data without losing it when the application is restarted? Any suggestions or solutions for this problem? Thank you for your assista ...

AngularJs is not responsive to sending POST requests with hidden <input> values

Within my web application, there are multiple forms on a single page. I am looking to utilize AngularJS to submit a specific form. Each form requires a unique ID with a hidden value for submission. However, using value="UNIQUE_ID" in a hidden input field ...