Getting the top card from a Trello list in Javascript

I am trying to get the top card from a list using Javascript.
I saw another post on this but the code was outdated / no longer working.

I have a Trello list, called “Flights” and I would appreciate if someone could help me with this. Simply, I want to get the top card in a Trello list, along with the custom fields of the card.

So far, I have tried the following code:

 // Getting all lists from a certain board.
        fetch(`https://api.trello.com/1/boards/0Ph2WHXQ/lists?key=5fe33d73bded56ada14decf701da0203&token=e353cb19fabc8dfbea36e1b824a92ff0b358860b1de2d11c745f6e8321edfc09`, {
            method: 'GET',
        }).then(response => {
            console.log(response)
            let lists = JSON.parse(response.body);
            // Searching for a list with a certain name and store it's id.
            let certainListId = lists.find(list => list.name === "Flights").id;

            // Use the stored id in certainListId to get all cards of the list.
            fetch(`https://api.trello.com/1/lists/${certainListId}/cards`, {
                method: 'GET'
            }).then(response => {

                let certainListCards = JSON.parse(response.body);
                // Cards in the array is in top to bottom order. So top one is the very first.
                let firstCard = certainListCards[0];

                console.log(firstCard)

                // Send with the bot the name of the first (top) card thanks to firstCard.name property.

            }).catch(err => console.error(err));

        }).catch(err => console.error(err));

However, I get the following error message:

The error is on the line:

let lists = JSON.parse(response.body);

I have tried the code without the JSON.parse, but I have an error “Typeerror: lists.find is not a function”

I assume I need the parse code, but I have zero idea why it’s not working. I have attached an image of just printing the response.body to the console.

Image:

Thank you for reading this, and I would highly appreciate some help. I am using node.js (latest version), using the cross-fetch module for the ‘fetch’ command. I am just requiring it as

const fetch = require("cross-fetch");

I highly doubt that would cause any issues, but feel free to enlighten me.
Thanks again!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

According to the cross-fetch docs, you don’t get the data from response.body, instead it’s passed into the second promise.

This works, lists returns an array of objects:

let fetch = require('cross-fetch');

fetch('https://api.trello.com/1/boards/0Ph2WHXQ/lists?key=5fe33d73bded56ada14decf701da0203&token=e353cb19fabc8dfbea36e1b824a92ff0b358860b1de2d11c745f6e8321edfc09')
  .then(res => {
    if (res.status >= 400) {
      throw new Error("Bad response from server");
    }
    return res.json();
  })
  .then(lists => {
    console.log(lists);
  })
  .catch(err => {
    console.error(err);
  });

Output:

[
  {
    id: '5d2364f2c87d3d4913fe2061',
    name: 'READ ME & TEMPLATE',
    closed: false,
    idBoard: '5d2363b2748e8e88009875f0',
    pos: 65535,
    subscribed: false,
    softLimit: null
  },....

Alternatively, while this doesn’t answer your question, here’s a solution to your code that just uses the NodeJS api:

const https = require('https')

// this should be in a .gitignored an environment file
key = "5fe33d73bded56ada14decf701da0203&token=e353cb19fabc8dfbea36e1b824a92ff0b358860b1de2d11c745f6e8321edfc09"

function getBoardLists(boardsId, callback) {

    const options = {
        hostname: 'api.trello.com',
        port: 443,
        path: `/1/boards/${boardsId}/lists?key=${key}`,
        method: 'GET'
    }

    https.request(options, res => {
        // references https://stackoverflow.com/a/39612292/9824103
        var json = '';
        res.on('data', function (chunk) {
            json += chunk;
        });
        res.on('end', function () {
            if (res.statusCode === 200) {
                try {
                    var lists = JSON.parse(json);

                    callback(lists, null)

                } catch (e) {
                    callback(null, error)
                }
            } else {
                callback(null, Error(`Status code ${res.statusCode} is not 200`))
            }
        });

    }).on('error', error => {
        callback(null, error)
    }).end()
}
function getList(listId, callback) {

    const options = {
        hostname: 'api.trello.com',
        port: 443,
        path: `/1/lists/${listId}/cards?key=${key}`,
        method: 'GET'
    }

    https.request(options, res => {
        // references https://stackoverflow.com/a/39612292/9824103
        var json = '';
        res.on('data', function (chunk) {
            json += chunk;
        });
        res.on('end', function () {
            if (res.statusCode === 200) {
                try {
                    var lists = JSON.parse(json);

                    callback(lists, null)

                } catch (e) {
                    callback(null, error)
                }
            } else {
                callback(null, Error(`Status code ${res.statusCode} is not 200`))
            }
        });

    }).on('error', error => {
        callback(null, error)
    }).end()
}

getBoardLists("0Ph2WHXQ", (lists, error) => {
    if (error) {
        return console.error(error)
    }

    console.log(lists)

    let flightsListId = lists.find(list => list.name === "Flights").id;

    getList(flightsListId, (list, error) => {

        if (error) {
            return console.error(error)
        }

        console.log(list)
    })
})

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0