.find() returns undefined using JSON data, using node.js

I’m creating a server using node and want to output JSON data, when a specific ID is clicked.

I’ve set up a dynamic URL which will pull the data from the clicked video using params and then compare it with the one from the JSON data, using .find()

When I log out the “req.params.id” I get the clicked ID. However, when I log out the .find() function it just gives me an undefined.

const selectedVideoData = fs.readFileSync("./data/video-details.json");

app.get("/videos/:id", (req, res) => {
    const id = req.params.id;

    const findClickedId = selectedVideoData.find((video) => video.id === id);

    res.send(findClickedId);
});

[
    {
        "id": "84e96018-4022-434e-80bf-000ce4cd12b8",
        "title": "BMX Rampage: 2021 Highlights",
        "channel": "Red Cow",
        "image": "https://i.imgur.com/l2Xfgpl.jpg",
        "description": "On a gusty day in Southern Utah, a group of 25 daring mountain bikers blew the doors off what is possible on two wheels, unleashing some of the biggest moments the sport has ever seen. While mother nature only allowed for one full run before the conditions made it impossible to ride, that was all that was needed for event veteran Kyle Strait, who won the event for the second time -- eight years after his first Red Cow Rampage title",
        "views": "1,001,023",
        "likes": "110,985",
        "duration": "4:01",
        "video": "https://project-2-api.herokuapp.com/stream",
        "timestamp": 1626032763000,
        "comments": [
            {
                "id": "35bba08b-1b51-4153-ba7e-6da76b5ec1b9",
                "name": "Micheal Lyons",
                "comment": "They BLEW the ROOF off at their last event, once everyone started figuring out they were going. This is still simply the greatest opening of an event I have EVER witnessed.",
                "likes": 0,
                "timestamp": 1628522461000
            },
            {
                "id": "091de676-61af-4ee6-90de-3a7a53af7521",
                "name": "Gary Wong",
                "comment": "Every time I see him shred I feel so motivated to get off my couch and hop on my board. He’s so talented! I wish I can ride like him one day so I can really enjoy myself!",
                "likes": 0,
                "timestamp": 1626359541000
            },
            {
                "id": "66b7d3c7-4023-47f1-a02c-520c9ca187a6",
                "name": "Theodore Duncan",
                "comment": "How can someone be so good!!! You can tell he lives for this and loves to do it every day. Every time I see him I feel instantly happy! He’s definitely my favorite ever!",
                "likes": 0,
                "timestamp": 1626011132000
            }
        ]
    },
    {
        "id": "c05b9a93-8682-4ab6-aff2-92ebb4bbfc14",
        "title": "Become A Travel Pro In One Easy Lesson",
        "channel": "Todd Welch",
        "image": "https://i.imgur.com/5qyCZrD.jpg",
        "description": "Luxury is something everyone deserves from time to time. Such an indulgence can make a vacation a truly rejuvenating experience. This video will focus a lot on helping the first time or inexperienced traveler head out prepared and confident in themselves.",
        "views": "2,043,765",
        "likes": "400,058",
        "duration": "7:26",
        "video": "https://project-2-api.herokuapp.com/stream",
        "timestamp": 1625158995000,
        "comments": [
            {
                "id": "ade82e25-6c87-4403-ba35-47bdff93a51c",
                "name": "Mattie Casarez",
                "comment": "This is exactly the kind of advice I’ve been looking for! One minute you’re packing your bags, the next you’re dancing around in the streets without a care in the world.",
                "likes": 0,
                "timestamp": 1625250720000
            },
            {
                "id": "bf704c76-cba9-462e-ac0a-166315df756c",
                "name": "Taylor Jade",
                "comment": "Excellent tips! Another idea is to keep all of your important belongings like your passport inside a waterproof bag. Perfect for those last minute trips to the beach, trust me.",
                "likes": 0,
                "timestamp": 1625238122000
            },
            {
                "id": "ec2bec8d-ea2b-458e-9d93-b7f929a8659b",
                "name": "Adnan Natt",
                "comment": "Who ever knew travel could be so easy? Looking forward to getting to put this into practice when I fly away in the near future. Wish me good luck!",
                "likes": 0,
                "timestamp": 1625177192000
            }
        ]
    }
]

Answer

You need to parse json since fs.readFileSync return string

const rawSelectedVideoData = fs.readFileSync("./data/video-details.json");

const selectedVideoData = JSON.parse(rawSelectedVideoData)

app.get("/videos/:id", (req, res) => {
    const id = req.params.id;

    const findClickedId = selectedVideoData.find((video) => video.id === id);

    res.send(findClickedId);
});

Advertisement

Answer