Angular $resource failing to transfer parameter to Express endpoint

I am currently working on an Angular application that needs to retrieve data from a MongoDB collection. To accomplish this, I am utilizing the $resource service within the flConstruct. The "query" function works well as it returns all data from the server without issues. However, when attempting to fetch data for a specific construct using the 'get' method, no data is being returned.

After examining the console output to see what the service is receiving, it appears that the parameter is not available for the findOne function. Here is the console log:

Get - constructs.getConstructById
constructData.id undefined
req.params._id undefined
req.query._id undefined
No Error - Construct Data Retrieved
Get - constructs.getConstructs (Id) - No Error
Returned - construct null
Get - constructs.getConstructs (Id) - Sending Back question
Get - constructs.getConstructs (Id) - Sending Back neither error nor question

//Angular service named, flConstruct

angular.module('app').factory('flConstruct',function($resource){
var ConstructResource = $resource('/api/constructs/:id', {id: "@id"}, {
    get: { method: 'GET', url: '/api/constructs/byId/:id', params: {id: "@id"}},
    query: { method: 'GET' , url: '/api/constructs', isArray: true },
    create: { method: 'POST'},
    update: { method: 'PUT' },
    delete: { method: 'DELETE', params: {id: '@id'}}
});

return ConstructResource;
});

//Express config file named, routes.js

var constructs = require('../controllers/constructs'),

module.exports = function(app){

app.get('/api/constructs', constructs.getConstructs);
app.get('/api/constructs/byId', constructs.getConstructById);

app.post('/api/constructs', constructs.createConstruct);
app.put('/api/constructs', constructs.updateConstruct);
app.delete('/api/constructs/:id', constructs.deleteConstruct);
});
}

// Express controller named, construct.js

var Construct = require('mongoose').model('Construct');

exports.getConstructs = function(req,res){
var constructData = req.body;
console.log("Get - constructs.getConstructs");
console.log("constructData.id " + constructData.id);
console.log("constructData " + constructData);
console.log("req.params.id " + req.params.id);
console.log("req.query.id " + req.query.id);
Construct.find({}).exec(function(err,collection){
    if (err){
        console.log("Error - No Construct Retrieved");
    }else{
        console.log("No Error - Construct Data Retrieved");
    }
    res.send(collection);
})
};

exports.getConstructById = function(req,res) {
console.log("Get - constructs.getConstructById")
var constructData = req.body;
console.log("constructData.id " + constructData.constructId);
console.log("req.params._id " + req.params._id)
console.log("req.query._id " + req.query._id)
Construct.findOne({_id:req.params.id}).exec(function(err,construct){
if (err){
    console.log("Error - No Construct Retrieved");
    console.log("Get - constructs.getConstructs (Id) - Error");
    res.send(null);
}else{
    console.log("No Error - Construct Data Retrieved");
    console.log("Get - constructs.getConstructs (Id) - No Error");
    console.log("Returned - construct " + construct)
    console.log("Get - constructs.getConstructs (Id) - Sending Back question");
    res.send(construct);
}
console.log("Get - constructs.getConstructs (Id) - Sending Back neither error nor     question");
})

};

Answer №1

After troubleshooting, I identified the issue within the Angular code. The problem lies in the get call within flCachedConstruct.js where the parameter was not properly defined. In order to fix this, I had to include both the parameter name, "id", and its corresponding value, constructID. The naming convention for the parameter in this function call matches what was set in flConstruct.js.

flConstruct.get({id: constructId }, function(data) {

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

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

The React component fails to re-render upon the initial state update

Currently, I am working on a straightforward survey that requires simple Yes or No answers. The questions are stored in a separate file called QuestionsList.js: Here is the list of questions: const QuestionsList = [ "Do you believe in ghosts?", "Have you ...

Using Thymeleaf within Javascript code to generate a URL?

Here is my question: The project's base URL is : The test page URL is :, and on this page, I have included a JavaScript file called datatable.packer.js using the following code: <script type="text/javascript" th:src="@{/resources/js/datatable ...

Tips for formatting Express API responses in an organized fashion

I'm seeking assistance with my Express API endpoint. I want the user details response to be customized in a specific structure, like so: { "userId": "a38a8320-b750-41d1-a2d3-117dd286eeb5", //guid "firstName": "John ...

Leveraging the power of axios.all for dynamic operations

Is there a way to efficiently reuse the same Vue-component for both editing and creating new users? While working with vue-router, I have implemented a beforeRouteEnter method to fetch data via API. Depending on whether an ID is set in the URL parameter, ...

The second function is not being executed during the callback

I've done some research on callbacks, but I'm still having trouble with my code. I've defined my functions and tried to run them onload, but something isn't quite right. The getelements() function works fine on its own. My goal is to l ...

Tips for keeping the main section from scrolling while scrolling through the side navigation

Within my Angular application, I have implemented a sidenav and a main section. My desired behavior is to prevent any scrolling in the main section while I am scrolling in the sidenav, similar to the functionality seen on the Angular Material Design docume ...

Leveraging Parameters in Ajax with jQuery and JavaScript

I've been exploring jQuery and trying to update a specific TD element with innerHTML. However, I'm stuck on how to capture the value of a parameter. In this scenario, my goal is to grab the user-id "1234" in order to update the TD identified as ...

Steps for extracting a portion of the current page's URL

Can someone help me extract a specific part of the current URL using JavaScript? The URL looks something like this: I need to isolate the number "3153038" from the URL and store it in a JavaScript variable. Thank you! ...

Tips on adjusting the Leaflet Map's zoom level to display all markers in React Leaflet

I am currently working on a project with React Leaflet map that requires changing the center and zoom based on a set of markers. The goal is to adjust the zoom level so that all the markers are visible on the map. To achieve this change in view, I am util ...

An issue arose when attempting to submit data from an AngularJS form

I am having an issue with my AngularJS form that is supposed to post data to a Scalatra servlet. Unfortunately, when the form is submitted, I am unable to retrieve any form parameters in my Scalatra servlet. Here is a snippet of my code: AngularJS $scop ...

I am encountering an error that states: UnhandledPromiseRejectionWarning: TypeError: Unable to retrieve the property 'buffer' as it is undefined

I am facing an issue with my code where I am unable to upload new files to my website. Can someone help me understand what might be causing this problem? const multer = require("multer"); const upload = multer({ storage: multer.memoryStorage() ...

Modify parameters variable when searching by utilizing bootgrid along with structured-filter

I have implemented both https://github.com/evoluteur/structured-filter and to develop an advanced search functionality using ajax/php. Initially, the code is functioning correctly and retrieves data from the php file. However, I am facing difficulties wh ...

Exploring the differences between React state and CSS :hover in the context of a dropdown menu that is accessible to both desktop users (via mouse) and

I have come across a dilemma regarding a dropdown menu that needs to cater to both Desktop/PC users (with mouse) and Mobile devices (with touch). After considering my options, here are the proposed solutions: OPTION 1 One approach is to implement it usi ...

What is the best way to transfer a JSON object from Java to JavaScript?

I've been struggling to pass data from my Spring controller to JavaScript, but I haven't had any success so far. Would using ajax be the best approach for this task? Can you provide me with some hints on how to achieve this effectively? In my co ...

Internet Explorer 11 Freezes Unexpectedly with Dynamic SVG Components

Lately, I developed a unique SVG Icon control for the new html application at my workplace. However, our quality department started noticing that IE 11 would intermittently "crash" while using the application after its implementation. I'm not convinc ...

Running the npm install command will eliminate any external JS or CSS files that are being

For my project, I incorporated jquery-datatimepicker by including jquery.datetimepicker.min.css and jquery.datetimepicker.full.min.js in angular.json and placed them within the node_modules/datetimepick directory. Here is a snippet of my angular.json conf ...

Creating an element in react-draggable with two sides bound and two sides open - here's how!

At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyo ...

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...