Value is coming up undefined

So I have a movielist and I have a column name thumnail_path which is udefined I have no idea why that is for example here is a movie i have from my movie list array

{
"idmovielist": 1,
"name": "MovieName",
"thumnail_path": "hhh",
"description": "ewewwe",
"year_released": "23",
"language_released": "eni"
},
below I have an attachemnet of my code and screen shot of my page
<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    <link href="mystyle.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="mycrud.js"></script>
    </head>
    <body>
    <title>My Movies</title>
    <header>
        <h1>Movies</h1>
    </header>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New Movie</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="newForm">
                        <div class="form-group row">
                            <label for="idmovielist" class="col-sm-2 col-form-label">ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="intNum" autocomplete="on">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" autocomplete="on">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail path</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="thumnail_path" autocomplete="on">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 col-form-label">description</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="description" autocomplete="on">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="year_released" class="col-sm-2 col-form-label">year released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="year_released" autocomplete="on">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="language_released" class="col-sm-2 col-form-label">language released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="language_released"
                                       autocomplete="on">
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button id="movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
                                data-target=#exampleModal>Add
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">Updated Movie</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="updateForm">
                        <div class="form-group row">
                            <div class="col-sm-10">
                                <input type="hidden" class="form-control" id="movieId">
                            </div>
                        </div>

                        <label for="idmovielist" class="col-sm-2 col-form-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="intNum" autocomplete="off">
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail path</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="thumnail_path" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 col-form-label">description</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="description" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="year_released" class="col-sm-2 col-form-label">year released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="year_released" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="language_released" class="col-sm-2 col-form-label">language released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="language_released"
                                       autocomplete="off">
                            </div>

                        </div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button id="updateMovie" type="button" class="btn btn-primary" data-toggle="modal"
                                data-target=#exampleModal2>Update
                        </button>

                        <button id = "deleteMovie" type="buton" class="btn btn-primary" data-toggle="modal"
                        data-target=#exampleModal2>Delete
                      </button>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <button id="movieAdded" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal>Add</button>
    <table class="table table-bordered table-hover" width="100%">
        <thead style="background-color:#ddd;" class="table-borderless">
        <tr>
            <th>idmovielist</th>
            <th>name</th>
            <th>thumnail path</th>
            <th>description</th>
            <th>year released</th>
            <th>language released</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody id="movies">
        </tbody>
    </table>
    </body>
    </html>

Open in new window

$(function() {
  //Fill the list when the page loaded
  renderMovieList('movies');

  $("#movieAdded").click(function(a) {
      a.preventDefault();
    let mydata = {
      idmovielist: $($("#newForm")[0].intNum).val(),
      name: $($("#newForm")[0].name).val(),
      thumnail_path: $($("#newForm")[0].thumnail_path).val(),
      description: $($("#newForm")[0].description).val(),
      year_released: $($("#newForm")[0].year_released).val(),
      language_released: $($("#newForm")[0].language_released).val(),
    }

    $("#newForm").trigger("reset");
    $("#newForm").toggle();
    $.ajax({
      method: "POST",
      url: "http://localhost:3000/movielist/addMovie",
      dataType: "json",
      data: mydata,
  }).always(function(data){
        console.log('always',data);
        renderMovieList();
    });
  });

  $("#updateMovie").on("click", function(a) {
      a.preventDefault();
    let updatedata = {
      idmovielist: $($("#updateForm")[0].intNum).val(),
      name: $($("#updateForm")[0].name).val(),
      thumnail_path: $($("#updateForm")[0].thumnail_path).val(),
      description: $($("#updateForm")[0].description).val(),
      year_released: $($("#updateForm")[0].year_released).val(),
      language_released: $($("#updateForm")[0].language_released).val(),
    }

    $("#updateForm").trigger("reset");
    $("#updateForm").toggle();

    $.ajax({
      url: "http://localhost:3000/movielist/updateMovie/18",
      method: 'PUT',
      dataType: 'json',
      data: updatedata,
    }).always(function(data){
          console.log(data);
          renderMovieList();
  });
});

$('.deleteMovie').click(function(e) {
   e.preventDefault();
   $(function() {
     //Fill the list when the page loaded
     renderMovieList('movies');

     $("#movieAdded").click(function(a) {
         a.preventDefault();
       let mydata = {
         idmovielist: $($("#newForm")[0].intNum).val(),
         name: $($("#newForm")[0].name).val(),
         thumnail_path: $($("#newForm")[0].thumnail_path).val(),
         description: $($("#newForm")[0].description).val(),
         year_released: $($("#newForm")[0].year_released).val(),
         language_released: $($("#newForm")[0].language_released).val(),
       }

       $("#newForm").trigger("reset");
       $("#newForm").toggle();
       $.ajax({
         method: "POST",
         url: "http://localhost:3000/movielist/addMovie",
         dataType: "json",
         data: mydata,
     }).always(function(data){
           console.log('always',data);
           renderMovieList();
       });
     });

     $("#updateMovie").on("click", function(a) {
         a.preventDefault();
       let updatedata = {
         idmovielist: $($("#updateForm")[0].intNum).val(),
         name: $($("#updateForm")[0].name).val(),
         thumnail_path: $($("#updateForm")[0].thumnail_path).val(),
         description: $($("#updateForm")[0].description).val(),
         year_released: $($("#updateForm")[0].year_released).val(),
         language_released: $($("#updateForm")[0].language_released).val(),
       }

       $("#updateForm").trigger("reset");
       $("#updateForm").toggle();

       $.ajax({
         url: "http://localhost:3000/movielist/updateMovie/18",
         method: 'PUT',
         dataType: 'json',
         data: updatedata,
       }).always(function(data){
             console.log(data);
             renderMovieList();
     });
   });

   $('.deleteMovie').click(function(e) {
      e.preventDefault();
      let deletedata = {
        idmovielist: $($("#updateForm")[0].intNum).val(),
        name: $($("#updateForm")[0].name).val(),
        thumnail_path: $($("#updateForm")[0].thumnail_path).val(),
        description: $($("#updateForm")[0].description).val(),
        year_released: $($("#updateForm")[0].year_released).val(),
        language_released: $($("#updateForm")[0].language_released).val(),
      }
      if (confirm('Are you sure you want to delete this movie?')) {
         $.ajax({
             url: "http://localhost:3000/movielist/13",
             data: deletedata,
             type: 'DELETE', // OR POST DEPENDING ON YOUR IMPLEMENTATION
             dataType: 'JSON',
         }).always(function(resp) {
           // Assumes delete process returns a JSON response {"status":true} or {"status":false}
           if (resp.status) {
             renderMovieList();
           }
           else {
             console.log("Their is an error");
           }
         });
      }
   });

     $("body").on('click', '.editMovie', function(a) {
       a.preventDefault();

       renderMovieList($($(this)[0]).data("movieId"));
     });

     $("body").on('click', '.deleteMovie', function(a) {
       a.preventDefault();

       deleteMovie($($(this)[0]).data("movieId"));
     });
   });
   //FUNCTIONS PART----------------------------------------------

   function renderMovieList() {
     $.ajax({
       method: "GET",
       url: "http://localhost:3000/movielist",
       dataType: "json",
       success: function(response) {
         $('#movies').empty();
         $.each(response, function(i, movie) {
           const rowText = "<tr>" +
             "<td>" + movie.idmovielist + "</td>" +
             "<td>" + movie.name + "</td>" +
             "<td>" + movie.thumbnail_path + "</td>" +
             "<td>" + movie.description + "</td>" +
             "<td>" + movie.year_released + "</td>" +
             "<td>" + movie.language_released + "</td>" +
             "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
             "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
           $("#movies").append(rowText);
         });
       }
     });
   }

});

  $("body").on('click', '.editMovie', function(a) {
    a.preventDefault();

    renderMovieList($($(this)[0]).data("movieId"));
  });

  $("body").on('click', '.deleteMovie', function(a) {
    a.preventDefault();

    renderMovieList($($(this)[0]).data("movieId"));
  });
});
//FUNCTIONS PART----------------------------------------------

function renderMovieList() {
  $.ajax({
    method: "GET",
    url: "http://localhost:3000/movielist",
    dataType: "json",
    success: function(response) {
      $('#movies').empty();
      $.each(response, function(i, movie) {
        const rowText = "<tr>" +
          "<td>" + movie.idmovielist + "</td>" +
          "<td>" + movie.name + "</td>" +
          "<td>" + movie.thumbnail_path + "</td>" +
          "<td>" + movie.description + "</td>" +
          "<td>" + movie.year_released + "</td>" +
          "<td>" + movie.language_released + "</td>" +
          "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
          "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
        $("#movies").append(rowText);
      });
    }
  });
}

Open in new window


Snapshot_19-05-06_12-01-47.pngBasically I want to know why my thumnail path is coming out undefined
Adil AliAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Look at your data
"thumnail_path": "hhh",
     ^

Open in new window

Now look at your code
          "<td>" + movie.thumbnail_path + "</td>" +
                             ^ 

Open in new window


Do you see the 'b' in your code that is not in the data?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.