function only returning last array object - vanilla js

Question

I am using a local json file and with it I have to fetch the data and then use it. Each actor of the json needs to be on display and i need to be able to click on one to see which movie they made. (school homework)

I can loop the array to get a new button for each name but then when i want to display which movie they made : It shows me the last object of the array. I can make it to display a specific name by using list[0] or an other number, like in any array but it misses the whole point of displaying it automatically after each click.

Here is the javascript and html

const url = "actors.json";
const actorList = document.getElementById("actor");
const actorDetailsContent = document.querySelector(".actor-details-content");

window.addEventListener("DOMContentLoaded", start);

function start() {
  fetchData();
}

async function fetchData() {
  const response = await fetch(url);
  list = await response.json();
  //console.log(list);
  showList();
}

function showList() {
  list.forEach((actor) => {
    actorList.innerHTML += `<button class="actor" data-id="${actor.fullname}">${actor.fullname}</button>`;
    actorList.addEventListener("click", () => getActorDetails(actor));
  });
}

function getActorDetails(actor) {
  console.log(actor);
//   actor = list[0];
  actorDetailsContent.innerHTML = `<h2 class = "actor-fullname">${actor.fullname}</h2>
          <p class = "actor-movie">${actor.movie}</p>`;
  // actor.forEach((actor), click)
  // if (actor.classList.contains("actor")) {
  //    actorDetailsContent.innerHTML
  // }
}

  <body>

    <h1>Actor List</h1>
    <div class="list-result">
      <div id="actor">
        <!-- <btn class = "actor"></div> -->

      </div>
    </div>

    <div class="actor-details">

      <!-- actor content -->
      <div class="actor-details-content">
        <!-- <h2 class = "actor-fullname">Actor Name Here</h2>
          <p class = "actor-movie">Movie Name</p>
 -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>

json sample :

    [
    {
        "fullname": "Amanda Plummer",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Brad Pitt",
        "movie": "Fight Club"
 },
    {
        "fullname": "Bronagh Gallagher",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Bruce Willis",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Burr Steers",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Catherine Scorsese",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Charles Scorsese",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Christie Cronenweth",
        "movie": "Fight Club"
 },
    {
        "fullname": "Christina Cabot",
        "movie": "Fight Club"
 },
    {
        "fullname": "Chuck Low",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Cillian Murphy",
        "movie": "Inception"
 },
    {
        "fullname": "Claire Geare",
        "movie": "Inception"
 },
    {
        "fullname": "David Andrews",
        "movie": "Fight Club"
 },
    {
        "fullname": "Dileep Rao",
        "movie": "Inception"
 },
    {
        "fullname": "Edward Norton",
        "movie": "Fight Club"
 },
    {
        "fullname": "Ellen Page",
        "movie": "Inception"
 },
    {
        "fullname": "Eric Stoltz",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Eugenie Bondurant",
        "movie": "Fight Club"
 },
    {
        "fullname": "Ezra Buzzington",
        "movie": "Fight Club"
 },
    {
        "fullname": "Frank DiLeo",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Frank Sivero",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Frank Vincent",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Frank Whaley",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "George Maguire",
        "movie": "Fight Club"
 },
    {
        "fullname": "Gina Mastrogiacomo",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Helena Bonham Carter",
        "movie": "Fight Club"
 },
    {
        "fullname": "Henny Youngman",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Joe Pesci",
        "movie": "Goodfellas"
 },
    {
        "fullname": "John Travolta",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Joseph Gordon-Levitt",
        "movie": "Inception"
 },
    {
        "fullname": "Ken Watanabe",
        "movie": "Inception"
 },
    {
        "fullname": "Laura Lovelace",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Leonardo DiCaprio",
        "movie": "Inception"
 },
    {
        "fullname": "Lorraine Bracco",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Lukas Haas",
        "movie": "Inception"
 },
    {
        "fullname": "Magnus Nolan",
        "movie": "Inception"
 },
    {
        "fullname": "Marion Cotillard",
        "movie": "Inception"
 },
    {
        "fullname": "Meat Loaf",
        "movie": "Fight Club"
 },
    {
        "fullname": "Michael Caine",
        "movie": "Inception"
 },
    {
        "fullname": "Mike Starr",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Paul Calderon",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Paul Sorvino",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Pete Postlethwaite",
        "movie": "Inception"
 },
    {
        "fullname": "Phil LaMarr",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Rachel Singer",
        "movie": "Fight Club"
 },
    {
        "fullname": "Ray Liotta",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Richmond Arquette",
        "movie": "Fight Club"
 },
    {
        "fullname": "Robert De Niro",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Rosanna Arquette",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Samuel L. Jackson",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Sydney 'Big Dawg' Colston",
        "movie": "Fight Club"
 },
    {
        "fullname": "Tai-Li Lee",
        "movie": "Inception"
 },
    {
        "fullname": "Tim DeZarn",
        "movie": "Fight Club"
 },
    {
        "fullname": "Tim Roth",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Tom Berenger",
        "movie": "Inception"
 },
    {
        "fullname": "Tom Hardy",
        "movie": "Inception"
 },
    {
        "fullname": "Tony Darrow",
        "movie": "Goodfellas"
 },
    {
        "fullname": "Uma Thurman",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Ving Rhames",
        "movie": "Pulp Fiction"
 },
    {
        "fullname": "Zach Grenier",
        "movie": "Fight Club"
 }


]

Can somebody help me figure why it doesn't show me the actor i click on ?

Please post the contents or a sample of actors.json too

WOUNDEDStevenJones
– WOUNDEDStevenJones

2022-08-23 15:53:17 +00:00
Commented Aug 23, 2022 at 15:53 — WOUNDEDStevenJones
– WOUNDEDStevenJones, Commented Aug 23, 2022 at 15:53
@WOUNDEDStevenJones it is added now !

Emma Pasquer
– Emma Pasquer

2022-08-23 15:56:09 +00:00
Commented Aug 23, 2022 at 15:56 — Emma Pasquer
– Emma Pasquer, Commented Aug 23, 2022 at 15:56

Mirodinho · Accepted Answer · 2022-08-23 16:11:41Z

2

You are overriding the click event listener on each iteration. Which will make the final one the only active one.

actorList.addEventListener("click", () => getActorDetails(actor));

What you need to do is set the listener on the concrete Button.

function showList() {
  list.forEach((actor) => {
    butt = document.createElement("button");
    butt.setAttribute("class", "actor");
    butt.setAttribute("data-id", actor.fullname)
    butt.textContent = actor.fullname
    actorList.appendChild(butt)
    butt.addEventListener("click", () => getActorDetails(actor));
  });
}

Or a variation of this.

answered Aug 23, 2022 at 16:11

Mirodinho

1,3211 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

function only returning last array object - vanilla js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related