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

Question

我試圖弄清楚如何從表單添加對象。 有什么想法可以在對象的末尾添加新名稱和photo_url嗎？

謝謝，

  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>

Answer 1

綁定表單並監聽提交事件。 將表單轉換為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

使用jQuery將表單數據轉換為JavaScript對象

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

問題描述

1 個解決方案

解決方案1
1 2014-07-22 12:45:52

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

問題描述

1 個解決方案

解決方案1 1 2014-07-22 12:45:52

解決方案1
1 2014-07-22 12:45:52