Comment ajouter à mon objet JSON en utilisant un formulaire

J'essaie de comprendre comment ajouter mon objet à partir d'un formulaire. Des idées comment je peux ajouter un nouveau nom et photo_url à la fin de mon objet?Comment ajouter à mon objet JSON en utilisant un formulaire

Merci,

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(); 
    }); 
});

Voici comment mon HTML est formaté et besoin d'avoir quelque nom que vous tapez dans la première zone d'entrée à ajouter aux données.

<!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>

Source

2014-07-22 kirdua

Est-il des données obligatoires est ce que vous voulez? J'ai trouvé un message utile - http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/ – hutingung

Non, je veux juste pouvoir taper nom et une URL pour une photo dans le formulaire en cours et les ajouter à mon objet "données" existant. J'espérais pouvoir utiliser someObject.push (name, photo_url); pour que ça marche. Quand j'ai essayé cela échoue. – kirdua

Pouvez-vous créer jsfiddle ou plunkr? – hutingung

Liez le formulaire et écoutez l'événement de soumission. Convertissez le formulaire en objet json et poussez vers les données.

$(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

Source

2014-07-22 12:45:52 hutingung

Comment ajouter à mon objet JSON en utilisant un formulaire

Répondre

Questions connexes