Swapi - make characters clickable and relate to information for each one

Hi guys!

Hi guys!

I’m working on an application which I need to get data from API an display it. Here is the API: http://swapi.co/api/films/ Each film get specific information and each character has it own information too.
Here is what I get now

And I need to make each character such as Luke Skywalker, C-3PO, R2-D2 etc. becomes clickable and every time I click on a name it will show upp the information about that character. How can I do it? Can anyone help me pls?

My code:

$(document).ready(() => {

    //make a function to search film
    function generateUrl(path){
        const url = `https://swapi.co/api/${path}`;
        return url;

    $("#btn").click(function(event){//click function for button
        //search function
        var value = $("#search").val();
        const path = 'films/';
        var newUrl = generateUrl(path) + '?search=' + value;
        //fetch data and return it to JSON
        .then(response => response.json()).then(data => {
            for (i in data.results){ //display data base on which film the user's searching
                    <a href="#" class="title">${data.results[i].title}</a>
                //onclick function to display the characters when the title is clicked
                $('.title').on("click", function(){
                    let urls = data.results[i].characters;
                    $(".back").on('click', function(){
        //function to fetch the multiple urls 
        function fetchCharacters(urls) {
            Promise.all(urls.map(url => fetch(url)))
                .then(responses => Promise.all(responses.map(res => res.text())))
                .then(texts => {
        //function to add characters to the document
        function addCharactersDOM(characters) {
            characters.forEach(character => {
                $("#charactersContainer").append(`<div class ="character">${character.name}</div>`);
        //refresh the whole page

Thanks a lot!

So we can test your code, can we also see the html? Better yet, can you put your project on Codepen and provide a link to it?

Thank you.,

here it is: https://codepen.io/ThoTran/project/editor/ALygok
I don’t know why but it doesn’t look like the result that I get when I use Chrome. :thinking:

The first problem I’m having with this is that you aren’t including the jQuery library:

ReferenceError: $ is not defined

Have you solved it? Cause would be nice to see. I have a similar project to solve.