Jquery Loop running infinte

Question

I was writing some code for printing json data in html table. Everything is working good but there is a bug i am not able to resolve. I have only 25 ids to print from json. But my code is printing 25 ids for more than 10 times. But it should run only for once. I have apllied breaking points in code but still unable to locate that bug. Here is my full file code with html and css

HTML

      
        
            

                Question
                User Info
            
            

                Id
                isActive
                is Complex
                is Breakdown
                USER

This is my JS

  function get_testser_info() {
      $.ajax({
          type: 'GET',
          url: 'https://api.myjson.com/bins/fh4d0',
          data: { get_param: 'value' },
          dataType: 'json',
          success: function (data) {
              console.log(data);
              var people = [];
              var ctCells = [], questionCells = [], userCells = [];
              var $tBody = $("#userdata tbody");
              $.each(data, function (i, f) {
                  var users = []
                  var question = []   
                  f.user_info.forEach((x) => {


                      //avoid duplicates
                      console.log("y=================", x)
                      var foundUser = users.find((user) => {
                          return user.id === x.id
                      })
                      if (!foundUser) {
                          users.push(x)
                      }

                  })
                  f.user_info.forEach((x) => {
                      var foundQuestion = question.find((questions) => {
                          return questions.id === x.id
                      })
                      if (!foundQuestion) {
                          question.push(x)
                      }
                  })
                  console.log(f.user_info)
                  data.forEach(value => {
                      ctCells.push(` `)
                      questionCells.push(`${value.id}${value.is_active}${value["is_complex"]}${value["is_broken_down_specific"]}


              ${value.user_info.map(valueData => {
                          return `
                                Id  ${valueData.id}
Name  ${valueData.name}
                                  UpdatedAt  ${valueData.updatedAt}
                                  
                                          ${valueData.data.map(IN => {
                              return `  
                                              
                                                ${IN.git_ids}

                                                 ${Object.keys(IN)[0].replace(/_/g, " ")}
                                                  ${((IN)[0] == true)  ? ``: ``}
                                                  `
                          })}
                                      
                                  `//end of return 
                      })
                      }
                      `)// end of return

              })

              }); //end of foreach
              console.log(ctCells)
              $.each(ctCells, function (i) {

                  $tBody.append(` ${questionCells[i]}`)
              })


          }
      }); //ajax end 

  }

CSS

Rory McCrossan · Accepted Answer

The issue is because you have nested loops through data. One using $.each(data, fn) and the other inside that using data.forEach(fn). Combine those loops:

function get_testser_info() {
  $.ajax({
    type: 'GET',
    url: 'https://api.myjson.com/bins/fh4d0',
    data: {
      get_param: 'value'
    },
    dataType: 'json',
    success: function(data) {
      var people = [],
        ctCells = [],
        questionCells = [],
        userCells = [],
        $tBody = $("#userdata tbody");

      $.each(data, function(i, f) {
        var users = []
        var question = []
        f.user_info.forEach((x) => {
          var foundUser = users.find((user) => {
            return user.id === x.id
          })
          if (!foundUser) {
            users.push(x)
          }
        })

        f.user_info.forEach((x) => {
          var foundQuestion = question.find((questions) => {
            return questions.id === x.id
          })
          if (!foundQuestion) {
            question.push(x)
          }
        })

        ctCells.push(` `)
        questionCells.push(`${f.id}${f.is_active}${f["is_complex"]}${f.is_broken_down_specific}
         

                ${f.user_info.map(valueData => {
                            return `
                                  Id  ${valueData.id}
Name  ${valueData.name}
                                    UpdatedAt  ${valueData.updatedAt}
                                    
                                            ${valueData.data.map(IN => {
                                return `  
                                                
                                                  ${IN.git_ids}

                                                   ${Object.keys(IN)[0].replace(/_/g, " ")}
                                                    ${((IN)[0] == true)  ? ``: ``}
                                                    `
                            })}
                                        
                                    `//end of return 
                        })
                        }

`) // end of return
      });
      $.each(ctCells, function(i) {

        $tBody.append(` ${questionCells[i]}`)
      })


    }
  }); //ajax end 

}

#scrlSec {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}


/* .checkSec { width: 60%;  } */

#userdata {
  background-color: #f1f1f1;
}

#user {
  overflow: auto;
}

.flex-container {
  display: flex;
}

th,
td {
  font-weight: normal;
  padding: 5px;
  text-align: center;
  width: 120px;
  vertical-align: top;
}

th {
  background: #00B0F0;
}

tr+tr th,
tbody th {
  background: #DAEEF3;
}

tr+tr,
tbody {
  text-align: left
}

table,
th,
td {
  border: solid 1px;
  border-collapse: collapse;
  table-layout: fixed;
}



  
    
      Question
      User Info
    
    
      Id
      isActive
      is Complex
      is Breakdown
      USER

Jquery Loop running infinte

Answers (1)

Related Questions