Keep getting undefined when trying to access a object attributes

Question

let PlayerData = {
    Travis: {
      keyboard: "ojnfijoewf",
      mouse: "wefewf",
      monitor: "kfmwefwe",
      sens: ["dpi","ingamesens"],
      controller: "xbox",
      ping: 120,
      biography: "was born in",
      earnings: 23455,
      resolution: "1920 x 1080",
      social_media: ["Youtube","Twitter"],
      debut: "Desember",
      signed: ["Free-Agent",""]
    }
  }

  

$(function(){
    $('#search-button').on('click', function() {

        var player_name = $('#player-search').val();

    
        $("#card-player-title").html(PlayerData.player_name);
        $(".card-text").html(PlayerData.player_name.biography);
    })
});

Answer 1

You can't use dot notation with dynamic keys. JavaScript will return you the property called player_name literally, which doesn't exist, that's why you get undefined. Use [], like this:

var player_name = $('#player-search').val();
$("#card-player-title").html(PlayerData[player_name]);
$(".card-text").html(PlayerData[player_name].biography);