Data is not getting added to the table from ajax response-CodePudding

I am trying to add data from the ajax response to the html table. I am getting data from the backend data but its not getting added to the table.

I tried various methods but none of them giving me a solution. I have pasted Javascript and HTML table code below. Please help me with this and let me know if you require any more information on this

<script>
    
            $(document).ready(function(){
            
            $('#search-movie').on('submit',function (e) {
                 $.ajax({
                  type: 'POST',
                  url: '/search',
                  data: $('#search-movie').serialize(),
                   success: function (q) {
                    var trHTML='';
                    $.each(q, function (i, userData) {
                            for (j=0; j<userData; j  ){
                           
                                trHTML  =
                                        '<tr><td>'
                                          userData[j].showid
                                          '</td><td>'
                                          userData[j].typeof
                                          '</td><td>'
                                          userData[j].title
                                          '</td><td>'
                                          userData[j].directors
                                          '</td><td>'
                                          userData[j].cast
                                          '</td><td>'
                                          userData[j].country
                                          '</td><td>'
                                          userData[j].releaseyear
                                          '</td><td>'
                                          userData[j].rating
                                          '</td><td>'
                                          userData[j].duration
                                          '</td><td>'
                                          userData[j].listedin
                                          '</td><td>'
                                          userData[j].description
                                          '</td></tr>'
                                        
                            }
                        });
                        $('#table1').append(trHTML);
                   
                   }
                  });
                 e.preventDefault();
                 });
            
            })
            </script>

<table id="table1" name="table1">
            <thead>
                <tr>
                   <th>Show ID</th>    
                   <th> Type</th>    
                   <th>Title</th>    
                   <th>Director</th>
                   <th>Cast</th>
                   <th>Country</th>
                   <th>Release Year</th>
                   <th>Rating</th>
                   <th>Duration</th>
                   <th>Listed In</th>
                   <th>Description</th>
    
                </tr>
              </thead>
              <tbody>
              </table>

[
  {
    "cast": "Rajneesh Duggal, Adah Sharma, Indraneil Sengupta, Anjori Alagh, Rajendranath Zutshi, Vipin Sharma, Amin Hajee, Shri Vallabh Vyas",
    "country": "India",
    "description": "Horror Movies, International Movies, Thrillers",
    "directors": "Vikram Bhatt",
    "duration": "TV-MA",
    "listedin": "143 min",
    "rating": "2008",
    "releaseyear": "December 15, 2017",
    "showid": "s10",
    "title": "1920",
    "typeof": "Movie"
  },
  {
    "cast": "Neil Nitin Mukesh, Adah Sharma, Rajit Kapoor, Gul Panag, Shama Sikander, Manish Chaudhary, Sudhanshu Pandey, Taher Shabbir",
    "country": "India",
    "description": "International Movies, Thrillers",
    "directors": "Naman Nitin Mukesh",
    "duration": "TV-14",
    "listedin": "135 min",
    "rating": "2019",
    "releaseyear": "March 15, 2020",
    "showid": "s1159",
    "title": "Bypass Road",
    "typeof": "Movie"
  },
  {
    "cast": "Sidharth Malhotra, Parineeti Chopra, Adah Sharma, Manoj Joshi, Madhuri Sanjeev, Sharat Saxena, Nina Kulkarni, Anil Mange",
    "country": "India",
    "description": "Comedies, Dramas, International Movies",
    "directors": "Vinil Mathew",
    "duration": "TV-14",
    "listedin": "135 min",
    "rating": "2014",
    "releaseyear": "April 1, 2020",
    "showid": "s2643",
    "title": "Hasee Toh Phasee",
    "typeof": "Movie"
  },
  {
    "cast": "Madison Reyes, Charlie Gillespie, Owen Patrick Joyner, Jeremy Shada, Jadah Marie, Sacha Carlson, Savannah Lee May, Cheyenne Jackson, Carlos Ponce, Booboo Stewart, Sonny Bustamante",
    "country": "United States",
    "description": "Kids' TV, TV Comedies",
    "directors": "Kenny Ortega",
    "duration": "TV-G",
    "listedin": "1 Season",
    "rating": "2020",
    "releaseyear": "September 10, 2020",
    "showid": "s3239",
    "title": "Julie and the Phantoms",
    "typeof": "TV Show"
  },
  {
    "cast": "Ghadah Abdulrazeq, Wafaa Amer, Hassan El Raddad, Houria Farghally, Sabry Fawwaz",
    "country": "Egypt",
    "description": "Dramas, International Movies",
    "directors": "Khaled Youssef",
    "duration": "TV-14",
    "listedin": "125 min",
    "rating": "2011",
    "releaseyear": "April 26, 2019",
    "showid": "s448",
    "title": "Amar's Hands",
    "typeof": "Movie"
  },
  {
    "cast": "Nour El-Sherif, Magda El-Khatib, Yousra, Mohsen Mohiedine, Oussama Nadir, Layla Hamadah, Mohamed Mounir, Ragaa Hussein",
    "country": "Egypt",
    "description": "Classic Movies, Dramas, International Movies",
    "directors": "Youssef Chahine",
    "duration": "TV-MA",
    "listedin": "129 min",
    "rating": "1982",
    "releaseyear": "June 18, 2020",
    "showid": "s491",
    "title": "An Egyptian Story",
    "typeof": "Movie"
  },
  {
    "cast": "Catherine Sutherland, Nakia Burrise, Steve Cardenas, Johnny Yong Bosch, Jason David Frank, David Yost, Austin St. John, Paul Schrier, Jason Narvy, Namihei Koshige, Danny Wayne, Akira Madden, David Stenstrom, Tadahiro Nakamura, Kerrigan Mahan",
    "country": "United States, France, Japan",
    "description": "Kids' TV",
    "directors": "",
    "duration": "TV-Y7",
    "listedin": "1 Season",
    "rating": "1996",
    "releaseyear": "January 1, 2016",
    "showid": "s4954",
    "title": "Power Rangers Zeo",
    "typeof": "TV Show"
  }
]

CodePudding user response：

Mistake seems to be on the below line.

You're running a for loop twice. Once is enough which will expose the object.
You were accessing property like userData[j].cast, but userData is already an object so access it like userData.cast.

$(document).ready(function() {
  const q = [{
      "cast": "Rajneesh Duggal, Adah Sharma, Indraneil Sengupta, Anjori Alagh, Rajendranath Zutshi, Vipin Sharma, Amin Hajee, Shri Vallabh Vyas",
      "country": "India",
      "description": "Horror Movies, International Movies, Thrillers",
      "directors": "Vikram Bhatt",
      "duration": "TV-MA",
      "listedin": "143 min",
      "rating": "2008",
      "releaseyear": "December 15, 2017",
      "showid": "s10",
      "title": "1920",
      "typeof": "Movie"
    },
    {
      "cast": "Neil Nitin Mukesh, Adah Sharma, Rajit Kapoor, Gul Panag, Shama Sikander, Manish Chaudhary, Sudhanshu Pandey, Taher Shabbir",
      "country": "India",
      "description": "International Movies, Thrillers",
      "directors": "Naman Nitin Mukesh",
      "duration": "TV-14",
      "listedin": "135 min",
      "rating": "2019",
      "releaseyear": "March 15, 2020",
      "showid": "s1159",
      "title": "Bypass Road",
      "typeof": "Movie"
    },
    {
      "cast": "Sidharth Malhotra, Parineeti Chopra, Adah Sharma, Manoj Joshi, Madhuri Sanjeev, Sharat Saxena, Nina Kulkarni, Anil Mange",
      "country": "India",
      "description": "Comedies, Dramas, International Movies",
      "directors": "Vinil Mathew",
      "duration": "TV-14",
      "listedin": "135 min",
      "rating": "2014",
      "releaseyear": "April 1, 2020",
      "showid": "s2643",
      "title": "Hasee Toh Phasee",
      "typeof": "Movie"
    },
    {
      "cast": "Madison Reyes, Charlie Gillespie, Owen Patrick Joyner, Jeremy Shada, Jadah Marie, Sacha Carlson, Savannah Lee May, Cheyenne Jackson, Carlos Ponce, Booboo Stewart, Sonny Bustamante",
      "country": "United States",
      "description": "Kids' TV, TV Comedies",
      "directors": "Kenny Ortega",
      "duration": "TV-G",
      "listedin": "1 Season",
      "rating": "2020",
      "releaseyear": "September 10, 2020",
      "showid": "s3239",
      "title": "Julie and the Phantoms",
      "typeof": "TV Show"
    },
    {
      "cast": "Ghadah Abdulrazeq, Wafaa Amer, Hassan El Raddad, Houria Farghally, Sabry Fawwaz",
      "country": "Egypt",
      "description": "Dramas, International Movies",
      "directors": "Khaled Youssef",
      "duration": "TV-14",
      "listedin": "125 min",
      "rating": "2011",
      "releaseyear": "April 26, 2019",
      "showid": "s448",
      "title": "Amar's Hands",
      "typeof": "Movie"
    },
    {
      "cast": "Nour El-Sherif, Magda El-Khatib, Yousra, Mohsen Mohiedine, Oussama Nadir, Layla Hamadah, Mohamed Mounir, Ragaa Hussein",
      "country": "Egypt",
      "description": "Classic Movies, Dramas, International Movies",
      "directors": "Youssef Chahine",
      "duration": "TV-MA",
      "listedin": "129 min",
      "rating": "1982",
      "releaseyear": "June 18, 2020",
      "showid": "s491",
      "title": "An Egyptian Story",
      "typeof": "Movie"
    },
    {
      "cast": "Catherine Sutherland, Nakia Burrise, Steve Cardenas, Johnny Yong Bosch, Jason David Frank, David Yost, Austin St. John, Paul Schrier, Jason Narvy, Namihei Koshige, Danny Wayne, Akira Madden, David Stenstrom, Tadahiro Nakamura, Kerrigan Mahan",
      "country": "United States, France, Japan",
      "description": "Kids' TV",
      "directors": "",
      "duration": "TV-Y7",
      "listedin": "1 Season",
      "rating": "1996",
      "releaseyear": "January 1, 2016",
      "showid": "s4954",
      "title": "Power Rangers Zeo",
      "typeof": "TV Show"
    }
  ];
  var trHTML = '';
  $.each(q, function(i, userData) {
    trHTML  =
      '<tr><td>'  
      userData.showid  
      '</td><td>'  
      userData.typeof  
      '</td><td>'  
      userData.title  
      '</td><td>'  
      userData.directors  
      '</td><td>'  
      userData.cast  
      '</td><td>'  
      userData.country  
      '</td><td>'  
      userData.releaseyear  
      '</td><td>'  
      userData.rating  
      '</td><td>'  
      userData.duration  
      '</td><td>'  
      userData.listedin  
      '</td><td>'  
      userData.description  
      '</td></tr>'
  });
  $('#table1').append(trHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" name="table1">
  <thead>
    <tr>
      <th>Show ID</th>
      <th> Type</th>
      <th>Title</th>
      <th>Director</th>
      <th>Cast</th>
      <th>Country</th>
      <th>Release Year</th>
      <th>Rating</th>
      <th>Duration</th>
      <th>Listed In</th>
      <th>Description</th>

    </tr>
  </thead>
  <tbody>
</table>

CodePudding user response：

Assume the variable q is the return array, the variable userData should be an element of the array, so you needn't the second for-loop. You may replace your $.each loop with the following:

$.each(q, (i, userData) => {
    trHTML  =
      '<tr><td>'  
      userData.showid  
      '</td><td>'  
      userData.typeof  
      '</td><td>'  
      userData.title  
      '</td><td>'  
      userData.directors  
      '</td><td>'  
      userData.cast  
      '</td><td>'  
      userData.country  
      '</td><td>'  
      userData.releaseyear  
      '</td><td>'  
      userData.rating  
      '</td><td>'  
      userData.duration  
      '</td><td>'  
      userData.listedin  
      '</td><td>'  
      userData.description  
      '</td></tr>'
  });  
  $('#table1').append(trHTML);

You refer to my jsFiddle.