jquery、javascript、ajax、node.js（API）を使用してユーザー情報を更新する方法

Question

getメソッドを使用してAPI（/api/dashboard/v1）からのいくつかのjsonデータを含む動的表があります。

putメソッドを使用して同じユーザー情報を更新するための別のAPI（/api/updateUser/v1:id）があります。

テーブルを作成しました。編集とい​​うオプションがあります。その編集オプションをクリックすると、SideNavが開きます。

sidenavにはユーザー情報が含まれています。 このユーザー情報は、選択したテーブル行から取得しています。

ここでは、これらの情報をapi（/api/updateUser/v1:id）で編集したいと考えています。しかし、私はmongo（_id）が見つからないために更新できません。

毎回、_idをクリックするとどうなりますか？

私はこの技術で非常に新しいです。誰か助けてください。 HTML、JSファイルは以下の通りです：

/index.htmlが

  <table class="table-bordered mytable"> 
       <thead class="table-head"> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
        <th>Status</th> 
        <th>Address</th> 
        <th>Action</th> 
       </tr> 
       </thead> 
       <tbody class="table-body mytabBody"> 
       </tbody> 
      </table> 
      <div id="mySidenav" class="sidenav"> 
       <div class="border"> 
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
       </div> 
       <div class="border"> 
        <form class="navbar-form" id="editUserInfo"> 
         <div class="form-group"> 
          <input type="text" class="form-control" id="myuser" placeholder="User name"> 
         </div> 
         <div class="form-group"> 
          <input type="email" class="form-control" id="myEmail" placeholder="Enter email"> 
         </div> 
         <div class="form-group"> 
          <input type="text" class="form-control" id="myAddress" placeholder="Enter Address"> 
         </div> 
         <button type="submit" value="signin" class="btn btn-custom" onclick="editUser()">Edit</button> 
        </form> 
       </div> 
      </div> 

/function.js

$(function(){ 
$.get("/api/dashboard/v1", function (response) { 
     console.log(response); 
     var myhtmlsec= ""; 
     for(var i=0; i<response.data.length; i++) { 
      myhtmlsec += "<tr>"; 
      myhtmlsec +="<td>"+response.data[i].user_name+"</td>"; 
      myhtmlsec +="<td>"+response.data[i].email+"</td>"; 
      myhtmlsec +="<td> </td>"; 
      myhtmlsec +="<td>"+response.data[i].address+"</td>"; 
      myhtmlsec +="<td>\ 
       <a href='#' onclick='myEdit(this);return false;' class='table-edit img-size'>\ 
       <img src='image/Edit.png'>\ 
       </img>\ 
       </a>\ 
       <a href='#' onclick='myDelete();return false;' class='table-delete img-size'>\ 
       <img src='image/Delete.png'>\ 
       </img>\ 
       </a>\ 
       </td>"; 
      myhtmlsec +="</tr>" 
     } 
     $('.table-body').append(myhtmlsec); 

    }); 

}); 
function myEdit(elem) { 

    document.getElementById("mySidenav").style.width = "250px"; 
    $('#myuser').val($(elem).closest('tr').find('td:first-child').html()); 
    $('#myEmail').val($(elem).closest('tr').find('td:nth-child(2)').html()); 
    $('#myAddress').val($(elem).closest('tr').find('td:nth-child(4)').html()); 

}; 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
}; 

function editUser() { 
    //Update function using api (/api/updateUser/v1:id) 
    //update function not working. 
    //node.js backend api function is working fine using postman. 
}; 

/例：

：JSONデータは、（/ API /ダッシュボード/ V1）のようなものです

{ 
    "data": [ 
    { 
     "_id": "5899aeafd1979f7f21618065", 
     "user_name": "sumit", 
     "email": "asd@ym.in", 
     "address": "bangalore", 
     "__v": 0 
    }, 
    { 
     "_id": "5899af07d1979f7f21618067", 
     "user_name": "john", 
     "email": "john@gmail.com", 
     "address": "usa", 
     "__v": 0 
    }, 
    { 
     "_id": "5899b3a8d1979f7f21618068", 
     "user_name": "asd", 
     "email": "asd@sdh.in", 
     "address": "asdasd", 
     "__v": 0 
    }, 
    { 
     "_id": "5899b8add1979f7f21618069", 
     "user_name": "asssd", 
     "email": "as@m.com", 
     "address": "delhi", 
     "__v": 0 
    }, 
    { 
     "_id": "5899b8e5d1979f7f2161806a", 
     "user_name": "ravi", 
     "email": "ras@tj.in", 
     "address": "ksjdb", 
     "__v": 0 
    }, 
    { 
     "_id": "5899d7300041fe7bc01bb92c", 
     "user_name": "uvm", 
     "email": "uvm@gt.in", 
     "address": "evljhsded", 
     "__v": 0 
    }, 
    { 
     "_id": "5899d82b0041fe7bc01bb92d", 
     "user_name": "seasd", 
     "email": "lsadsa@er.net", 
     "address": "bcdfdvdf", 
     "__v": 0 
    }, 
    { 
     "_id": "5899d98e0041fe7bc01bb92e", 
     "user_name": "nghc", 
     "email": "fgbf@jy.in", 
     "address": "werwe", 
     "__v": 0 
    }, 
    { 
     "_id": "5899dc190041fe7bc01bb92f", 
     "user_name": "bnvnf", 
     "email": "dfgf@gmail.com", 
     "address": "rtffdfdgd", 
     "__v": 0 
    } 
    ] 
} 

Answer 1

「this」をmyEdit関数に渡す代わりに、代わりにjsonオブジェクトを渡す必要があります。次に、値をもう一度取得するためにDOMを検索する必要はありません。

"<a href='#' onclick='myEdit('"+ response.data[i] +"');return false;' class='table-edit img-size'>" 

function myEdit(user) { 
    document.getElementById("mySidenav").style.width = "250px"; 
    // user._id --> your lost reference to _id. 
    $('#myuser').val(user.user_name); 
    $('#myEmail').val(user.email); 
    $('#myAddress').val(user.address); 

}; 

私は強く、文字列の断片からHTMLを構築し、それを注入する以外にも利用できるはるかに良い解決策があるとして、あなたのテーブルを構築するための別のアプローチを探すためのアドバイスです。

種類よろしく、 ニコ