Get Movie Details from TheMovieDB API (Help Needed)

Let’s take a step back and look at focusing on just handling the object we’re getting back. Looking at the API, it’s returning an object and then an array for cast. Let’s look at what printing that out could look like as a script. I’m going to remove the variables in the header and prompter at the bottom just to cut down a little and let us focus.

// variables header above here
function fetchCastFromURL() {
    fetchURL = `https://api.themoviedb.org/3/movie/${itemID}/credits?api_key=${tmdbAPI}&language=en-US`;
    return Utils.getJsonFromUrl(fetchURL);
}

function getCast() {
    var cast = fetchCastFromURL();
    return cast;
}

function getData() {
    getCast();
}

// prompter code below here

That’s not going to do a lot beyond (hopefully) make the web request. Let’s expand getCast a little:

function getCast() {
    var cast = fetchCastFromURL();
    console.log(JSON.stringify(cast));
    return cast;
}

All going well you should see the same JSON representation in the console as we would see from the API. Sometimes cast can be falsy if the request fails, so let’s handle that:

function getCast() {
    var cast = fetchCastFromURL();
    if (!cast) {
        console.log("Request to get cast failed");
        return [];
    }
    console.log(JSON.stringify(cast));
    return cast;
}

We’re just going to return an empty array here and log a message when we fail the request. The cast result is actually a credits object, so let’s do a little rename of our methods and return the internal cast response:

function fetchCreditsFromURL() {
    fetchURL = `https://api.themoviedb.org/3/movie/${itemID}/credits?api_key=${tmdbAPI}&language=en-US`;
    return Utils.getJsonFromUrl(fetchURL);
}

function getCast() {
    var credits = fetchCreditsFromURL();
    if (!credits) {
        console.log("Request to get credits failed");
        return [];
    }
    console.log(JSON.stringify(credits));
    return credits.cast ? credits.cast : [];
}

When we look at the documentation, cast is listed as an optional array element inside the credits response object. This means if it is set it should be credits.cast, you can see why we renamed the variables now. The ? syntax is a ternary operator and what we’re doing is checking if credits.cast is truthy and if it is we return it otherwise we hand back an empty array.

Now it’s time to expand out getData() and we’re going to put a loop in just to see what we get back:

function getData() {
    let cast = getCast();
    for (let castMember of cast) {
        console.log(castMember.name);
    }
}

All going well when this is tested we should see an array of cast members’ names printed out into our console. We might have an empty array returned and if that was an error hopefully we also got a log message saying as much (e.g. the “Request to get credits failed”) but otherwise we’ve got our listing of cast members that we can iterate over now. Let’s put the bulk of getData() back together and we’ll add some code to create a new record via a link to form field or table field:

function getData() {
    var film = fetchDetailsFromURL();

    var imdbID = film.imdb_id;

    console.log(imdbID)

    var itemIds = new Set();
    var currentItemsByImdbID = {};
    var allCurrentItems = form.getRecords();
    for (let currentItems of allCurrentItems) {
        currentItemsByImdbID[currentItems.getFieldValue(imdbid_id)] = currentItems;
        itemIds.add(currentItems.getFieldValue(imdbid_id));
    }

    let newRecord;
    if (itemIds.has("http://imdb.com/title/" + imdbID)) {
        Utils.alertWithMessage(film.title + ' already exists.', 'Sorry.');
    } else {
        newRecord = form.addNewRecord();
        newRecord.setFieldValues({
            [title_id]: film.title,
            [released_id]: film.release_date,
            [imdbid_id]: "http://imdb.com/title/" + film.imdb_id,
            [summary_id]: film.overview,
            [runtime_id]: film.runtime,
            [tagline_id]: film.tagline,
        });

        document.saveAllChanges();

        let cast = getCast();
        for (let castMember of cast) {
            let actorRecord = newRecord.addNewRecordToField(cast_table_field_id);
            actorRecord.setFieldValues({
                [actor_id]: castMember.name,
                [role_id]: castMember.character,
                [tmdb_actor_id]: castMember.id
            });
            document.saveAllChanges();
        }
    }

    var Poster = "https://www.themoviedb.org/t/p/w1280/" + film.poster_path
    if (Poster != null) {
        newRecord.addPhotoFromUrlToField(Poster, poster_id);
    }
    form.saveAllChanges();
}

We’ve pulled back in the original getData() and I’ve added a block for getting the cast and inside it we’re using addNewRecordToField to get a new record (similar to form.addNewRecord) added to the table field of the record we just created. Behind the scenes this ensures that Tap Forms links the data for us properly. We use setFieldValues as was done earlier because we’re just working with a record object (albeit one that’s a record in a table). I also add in two precautionary document.saveAllChanges() because when dealing with record creation and record linking via the scripting interface there are some quirks that can appear and explicitly flushing the state down generally makes that more consistent. The document.saveAllChanges() call is an alias for form.saveAllChanges() and does the same thing.

I think this should work or at the very least get you a little closer to your journey.

You’re using a bunch of global variables, each time you do var thing then thing becomes a global variable when you’re doing it outside of a function. That’s why you can use the variables almost anywhere though in general that’s not best practice. The prompter uses this technique in part because it’s an async call but once we’ve stepped out of that, it’s best to use actual arguments and return values. When you do var inside the function, it’s scoped to the function and not accessible outside it. Let’s rewrite this slightly to use an input variable for inputID and return a value:

function convertIMDBtoTMDB(inputID) {
    fetchURL = `
    https : // api.themoviedb.org/3/find/${inputID}?api_key=${tmdbAPI}&language=en-US&external_source=imdb_id`;
    var tmdbResp = Utils.getJsonFromUrl(fetchURL);
    var tmdbID = tmdbResp.movie_results[0].id;
    console.log(JSON.stringify(tmdbID))
    if (! tmdbID) {
        console.log("Request to get code failed");
        return "";
    } else {
        return tmdbID;
    }
}

Same function except we’re accepting an inputID as an argument and then returning the tmdbID. I left the tmdbAPI alone because I feel it’s a constant more than a variable and something you’d want to leave in global scope. Where possible you want to explicitly tell a function what it’s inputs are, in this case literally inputID but even in the other places it’s better to be explicit:

function fetchCreditsFromURL(itemID) {
    fetchURL = `https://api.themoviedb.org/3/movie/${itemID}/credits?api_key=${tmdbAPI}&language=en-US`;
    return Utils.getJsonFromUrl(fetchURL);
}

That way you know where a variable is coming from and you’re less likely to have a variable in global scope accidentally trashed. Nothing in Javascript is straight forwards so I was looking for a good resource and this page on demystifying Javascript variable scope has some great details on how it works and where some of the pitfalls are.

Instead of relying on the global changing, assign it to a variable in the right scope and then pass it along to anything else that needs it. Hopefully that helps get you a little further :)