Value is coming up undefined

Adil Ali
Adil Ali used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial