如何使用表格添加到我的JSON對象

我想弄清楚如何從表單添加我的對象。任何想法如何我可以添加一個新名稱和photo_url到我的對象的結尾？如何使用表格添加到我的JSON對象

感謝，

data = [ 
    {name: "Mark-Paul Gosselaar", photo_url: ""}, 
    {name: "Delta Burke", photo_url: "img/avatars/delta.png"}, 
    {name: "Alf", photo_url: "img/avatars/alf.png"}, 
    {name: "Jaleel White", photo_url: "img/avatars/jaleel.png"}, 
    {name: "Ralph Macchio", photo_url: "img/avatars/ralph.png"}, 
    {name: "Candace Cameron", photo_url: "img/avatars/candace.png"}, 
    {name: "Patrick Duffy", photo_url: "img/avatars/pduff.png"}, 
    {name: "Arnold Schwartzengger", photo_url: "img/avatars/arnold.png"} 
]; 
//MY CODE 
$(document).ready(function() { 
    var employee = data; 
    var directory = $("#directory"); 
    //SORT THROUGH THE JSON DATA AND REVERSE IT 
    function reverseArr(input) { 
     for (var i = input.length - 1; i >= 0; i--) { 
      var photoPlacement = employee[i].photo_url; 
      //CHECKS TO SEE IF A PHOTO_URL OBJECT HAS SOMETHING IN IT, IF IT DOESN'T THEN INJECTS THE DEFAULT IMAGE 
      if (photoPlacement.length <= 0) { 
       photoPlacement = 'img/default.png' 
      } else { 
       photoPlacement = employee[i].photo_url; 
      } 
      var employeePost = "<div class='employee'><div id='photo'><img src=" + photoPlacement + "></div><div id='closeButton' class='close'><img src='img/close.png'></div><div class='empName'>" + employee[i].name + "</div></div>"; 
      console.log(employee[i].name); 
      console.log(employee[i].photo_url); 
      directory.append(employeePost); 
     } 
    } 
    var b = reverseArr(employee); 
    //SHOW THE "X" (CLOSE) BUTTON 
    $('.employee').hover(
      function() { 
       $(this).children("#closeButton").removeClass("close") 
       $(this).children("#closeButton").addClass("showClose") 
       //IF THE "X" (CLOSE) BUTTON IS CLICKED, DELETE PARENT DIV 
       $(this).children("#closeButton").click(function(event) { 
        event.preventDefault(); 
        $(this).parent(".employee").remove(); 
       }) 
      }, 
      function() { 
       $(this).children("#closeButton").removeClass("showClose") 
       $(this).children("#closeButton").addClass("close") 
      } 
    ); 
    //IF FORM BUTTON IS CLICKED, SUBMIT NEW DATA TO JSON OBJECT 
    $(":button").click(function(event) { 
     event.preventDefault(); 
    }); 
});

這是我的HTML是如何格式化，需要有任何名義在第一個輸入框中輸入要添加到數據。

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="css/application.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div id="main-content"> 
      <!-- The page width is 817px --> 
      <!-- Example of using the form CSS to help you out. --> 
      <form> 
       <div> 
        <label>Full Name</label> 
        <input name="name" type="text" required /> 
       </div> 
       <div> 
        <label>Photo URL</label> 
        <input name="photo_url" /> 
       </div> 
       <button type="submit">Create</button> 
      </form> 
      <hr /> 
      <!-- Employee list goes here. There is initial data for you in application.js --> 
      <div id="directory"> 
      </div> 
     </div> 
     <script src="js/vendor/jquery.min.js" type="text/javascript"></script> 
     <script src="js/vendor/underscore.js" type="text/javascript"></script> 
     <script src="js/application.js" type="text/javascript"></script> 
     <script src="js/main.js" type="text/javascript"></script> 
    </body> 
</html>

來源

2014-07-22 kirdua

它是數據綁定是你想要的嗎？我發現了一個有用的帖子 - http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/ – hutingung

不，我只是想能夠鍵入一個名稱和照片的URL添加到當前表單中，並將其添加到我現有的「數據」對象中。我希望能夠使用someObject.push（name，photo_url）;讓它工作。當我嘗試失敗時。 – kirdua

你可以創建jsfiddle或plunkr嗎？ – hutingung

綁定表單並偵聽提交事件。將表單轉換爲json對象並推送到數據。

$(function() { 
    //listen to form submit 
    $("form").on("submit", function(event) { 
     event.preventDefault(); 
     //serialize form to object 
     var formData = $(this).serializeObject(); 
     data.push(formData); 
     console.log(data); 
     $("#data").html(JSON.stringify(data)); 
    }); 
});

Plnkr - http://plnkr.co/edit/dhLqCkXmpGHit78ZGAxZ?p=preview

Convert form data to JavaScript object with jQuery

來源

2014-07-22 12:45:52 hutingung

如何使用表格添加到我的JSON對象

回答

相關問題