我正在尝试弄清楚如何从表单添加我的对象。有什么想法可以将新名称和 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>
最佳答案
绑定(bind)表单并监听提交事件。将表单转换为 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));
});
});
关于javascript - 如何使用表单添加到我的 JSON 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24885914/