How to add to my JSON Object using a form

Question

I'm trying to figure out how to add my object from a form. Any ideas how I can add a new name and photo_url to the end of my object?

Thanks,

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

This is how my HTML is formatted and need to have whatever name you type in the first input box to be added to data.

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

Is it data binding is what you want? I found a useful post - http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/ — hutingung, Jul 22 '14 at 11:34
No, I just want to be able to type a name and a URL for a photo into the current form and add those to my existing "data" object. I was hoping that I could use someObject.push(name, photo_url); to have it work. When I have tried that it fails. — kirdua, Jul 22 '14 at 11:38
I created a simple jsfiddle but I not sure is it what you want - http://plnkr.co/edit/dhLqCkXmpGHit78ZGAxZ?p=preview . I bind the form and push to data object. — hutingung, Jul 22 '14 at 11:58
I posted the answer as it is best practice and to avoid unanswered question. — hutingung, Jul 22 '14 at 12:46

score 1 · Answer 1 · edited May 23 '17 at 12:27

Bind the form and listen to submit event. Convert the form to json object and push to data.

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

How to add to my JSON Object using a form

1 Answers1