'$.getJSON works when trying to find all records, but doesnt work when trying to find one specific record

I'm working on a section of my app where a user can add a note to his project. Each note has the capability to have additional comments appended to it.

So far the backend is working. When calling all records at a time or one record at a time(by id) manually, be it via postman or simply adding the id number of a project(gotten from mongo) to the browser, both pull up the records as specified.

The problem starts when I try to pull this information through the front end via $.getJSON.

Say for example that I have two projects in my app.

Project 01 has an id of "123" and has 3 comments

and

Project 02 has an id of "456" and has 10 comments 

When I call all projects on the front end of the app, I see both appear, and all their comments come through ok but when I try to call, for example, project two by id, it does show but I get 10 "undefined" for all of that projects 10 comments. Same thing happens for any one record I call.

And again, this happens only when trying to call it via jquery $.getJSON because when I manually do it via postman/browser, they come through fine.

Here is some code below for when I try to find one record (not working fully).

This is the backend code:

app.get("/notesapi/:tabID", (request, response) => {
    
    var idNum = request.params.tabID;
    var newIdNumber = idNum.trim();

    NotesModel.findOne({_id: newIdNumber}, (error, data)=>{
        if(error){
            console.log("error in finding this particular record!");
            throw error;
        } else {
            console.log("data for this one record found YO");
            response.status(200);
            response.json(data);
        }
    });
});

And this is the front end code:

function getFreshComments(tabID){

    console.log("FRONTEND -- the link is: /notesapi/" + tabID);

    $.getJSON("/notesapi/456", showCommentsGotten);

    function showCommentsGotten(dataFedIn){ 

        var tabInnerComments = $("#" + tabID +" .theNote");
        var output = "";

        $.each(dataFedIn, (key, item)=>{
            output += item.todoMessages + "<br>";
        });  

        var normalComments = output;
        var newComments = normalComments.split(",").join("<br>");

        tabInnerComments.html(newComments);
    }  


}

As the example explained above, if I wanted to pull the 10 comments from id 456, then when I use $.getJSON("/notesapi/456", showCommentsGotten); This returns me 10 "undefined".

When I remove the id number from the URL, then it fetches me ALL the comments for ALL the notes.

I don't get any errors anywhere. What am I missing or doing wrong?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source