Блог

Главная - Вопросы по программированию - Извлечение данных Mongodb в интерфейсе с помощью метода Ajax Get

Извлечение данных Mongodb в интерфейсе с помощью метода Ajax Get

#html #jquery #node.js #ajax #mongodb

Вопрос:

Я вставил данные в mongodb и использовал nodejs для написания API, необходимо извлечь эти данные в интерфейсе с помощью jquery. Я вставил 3 строки данных в mongodb.Я использовал приведенный ниже код для получения данных, и он работает нормально, но он жестко закодирован. Я хочу, чтобы это произошло вручную с помощью jquery. Пожалуйста, помогите решить эту проблему.

  $.ajax({
        dataType:"json",
        url: "/purchaser/purchasersList",
        type:"GET",
        global:false,
        async:false,
        success: function(response){
            console.log("response is:",response);
            document.getElementById("userName").innerHTML = (response[0].userName);
            document.getElementById("email_id").innerHTML=(response[0].email_id);
            document.getElementById("address").innerHTML=(response[0].address);
            document.getElementById("phoneNumber").innerHTML=(response[0].phoneNumber);
              //2nd row data
            document.getElementById("userName1").innerHTML = (response[1].userName);
            document.getElementById("email_id1").innerHTML=(response[1].email_id);
            document.getElementById("address1").innerHTML=(response[1].address);
            document.getElementById("phoneNumber1").innerHTML=(response[1].phoneNumber);
             //3rd row data
            document.getElementById("userName2").innerHTML = (response[2].userName);
            document.getElementById("email_id2").innerHTML = (response[2].email_id);
            document.getElementById("address2").innerHTML = (response[2].address);
            document.getElementById("phoneNumber2").innerHTML =(response[2].phoneNumber);
        
         },


 error: function (jqXHR, textStatus, errorThrown) { // error callback    

             console.log("Error Response jqXHR is:"   jqXHR);e 
 <table class = table2>
  <tr>
    <th  style="text-align:center">SL.No</th> 
    <th style="text-align:center">Purchaser Name</th>
    <th style="text-align:center">Email</th> 
    <th style="text-align:center">Address</th>
    <th style="text-align:center">Phone No</th>
   </tr> 
   <tr>
  
    <td height="50">1</td>
       <td height="50" id="userName"></td>
       <td height="50" id="email_id"></td>
       <td height="50" id="address"></td>
       <td height="50" id="phoneNumber"></td>
       <td height="50">Active</td>
  </tr> 
  <tr>
  ..
  </tr>

Ответ №1:

Если вы можете изменить идентификатор на класс, то я советую вам попробовать что-то вроде этого:

 $.each(response,function(i) {
  var tr = $('.table2 tr').eq((i 1));
  $(tr).find(".userName").text(response[i].userName)
  $(tr).find(".email_id").text(response[i].email_id)
  $(tr).find(".address").text(response[i].address)
  $(tr).find(".phoneNumber").text(response[i].phoneNumber)
})

Обратите внимание, что я не могу проверить это, так как у меня нет вашего ответа.

Полный код

 $.ajax({
      dataType: "json",
      url: "/purchaser/purchasersList",
      type: "GET",
      global: false,
      async: false,
      success: function(response) {
        $.each(response,function(i) {
          var tr = $('.table2 tr').eq((i 1));
          $(tr).find(".userName").text(response[i].userName)
          $(tr).find(".email_id").text(response[i].email_id)
          $(tr).find(".address").text(response[i].address)
          $(tr).find(".phoneNumber").text(response[i].phoneNumber)
        })

      },


      error: function(jqXHR, textStatus, errorThrown) { // error callback    

          console.log("Error Response jqXHR is:"   jqXHR);
          e 
 <table class=table2>
  <tr>
    <th style="text-align:center">SL.No</th>
    <th style="text-align:center">Purchaser Name</th>
    <th style="text-align:center">Email</th>
    <th style="text-align:center">Address</th>
    <th style="text-align:center">Phone No</th>
  </tr>
  <tr>

    <td height="50">1</td>
    <td height="50" class="userName"></td>
    <td height="50" class="email_id"></td>
    <td height="50" class="address"></td>
    <td height="50" class="phoneNumber"></td>
    <td height="50">Active</td>
  </tr>
  <tr>
    ..
  </tr>
Метки: