如何使用表单添加到我的 JSON 对象答案

【问题标题】：How to add to my JSON Object using a form如何使用表单添加到我的 JSON 对象
【发布时间】：2014-07-22 11:16:39
【问题描述】：

我试图弄清楚如何从表单中添加我的对象。有什么想法可以在对象末尾添加新名称和 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>

【问题讨论】：

数据绑定是你想要的吗？我发现了一个有用的帖子 - lucaongaro.eu/blog/2012/12/02/…
不，我只是希望能够在当前表单中输入照片的名称和 URL，并将它们添加到我现有的“数据”对象中。我希望我可以使用 someObject.push(name, photo_url);让它工作。当我尝试它失败时。
你能创建 jsfiddle 或 plunkr 吗？
我创建了一个简单的 jsfiddle，但我不确定它是否是您想要的 - plnkr.co/edit/dhLqCkXmpGHit78ZGAxZ?p=preview。我绑定表单并推送到数据对象。
这会很好地工作。感谢您的帮助。

标签： javascript jquery html arrays json

【解决方案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

Convert form data to JavaScript object with jQuery

【讨论】：