将外部对象添加到现有数组

我有一个基于JSON数据更新的表。 表中的每一行都有一个复选框，其中包含相应JSON对象的值，该对象基本上是关于任何用户的信息。 在选择任何行并保存以显示所选用户配置文件时，我还将选定的JSON对象存储在数组’savedData’中。

我还可以选择通过单击“打开外部表单”按钮弹出的表单在外部添加用户。 现在，我正在尝试创建一个对象，并在提交该表单时将其存储在相同的“savedData”数组中。 同时，’div.parent’应该生成并以与从表中选择的其他用户相同的格式附加到’div.container’。

不幸的是，’div.parent’没有被创建，外部对象也没有被添加。

你能帮帮我解决这个问题吗？

function createTable() { $.getJSON("https://api.randomuser.me/?results=5", function(data) { $('#datatable tr:has(td)').remove(); data.results.forEach(function (record) { var json = JSON.stringify(record); $('#datatable').append( $('').append( $('').append( $('').attr('type', 'checkbox') .addClass('selectRow') .val(json) ), $('').append( $('').attr('href', record.picture.thumbnail) .addClass('imgurl') .attr('target', '_blank') .text(record.name.first) ), $('').append(record.dob) ) ); }) }).fail(function(error) { console.log("**********AJAX ERROR: " + error); }); } var savedData = new Map; // Keyed by image URL. Start with nothing. function saveData(){ var errors = []; // Add selected to map $('input.selectRow:checked').each(function(count) { // Get the JSON that is stored as value for the checkbox var obj = JSON.parse($(this).val()); // See if this URL was already collected (that's easy with Set) if (savedData.get(obj.picture.thumbnail)) { errors.push(obj.name.first); } else { // Append it to the Map: savedData.set(obj.picture.thumbnail, obj); } }); refreshDisplay(); if (errors.length) { alert('The following were already selected:\n' + errors.join('\n')); } } function refreshDisplay() { $('.container').html(''); savedData.forEach(function (obj) { // Reset container, and append collected data (use jQuery for appending) $('.container').append( $('
').addClass('parent').append( $('').addClass('dataLabel').text('Name: '), obj.name.first + ' ' + obj.name.last, $('
'), // line-break between name & pic $('').addClass('myLink').attr('src', obj.picture.thumbnail), $('
'), $('').addClass('dataLabel').text('Date of birth: '), obj.dob, $('
'), $('').addClass('dataLabel').text('Address: '), $('
'), obj.location.street, $('
'), obj.location.city + ' ' + obj.location.postcode, $('
'), obj.location.state, $('
'), $('').addClass('removeMe').text('Delete'), $('').addClass('top-btn').text('Swap with top'), $('').addClass('down-btn').text('Swap with down') ) ); resetEvents(); }) // Clear checkboxes: $('.selectRow').prop('checked', false); } function logSavedData(){ // Translate Map to array of values: var data = Array.from(savedData, function (pair) { return pair[1]; }); // Convert to JSON and log to console. You would instead post it // to some URL, or save it to localStorage. console.log(JSON.stringify(data, null, 2)); } $(document).on('click', '.removeMe', function() { var key = $('.myLink', $(this).parent()).attr('src'); // Delete this from the saved Data savedData.delete(key); // And redisplay refreshDisplay(); }); /* Swapping the displayed articles in the result list */ function resetEvents() { $(".top-btn, .down-btn").unbind('click'); handleEvents(); $('.down-btn').click(function() { var toMove1 = $(this).parents('.parent'); $(toMove1).insertAfter($(toMove1).next()); handleEvents(); }); $('.top-btn').click(function() { var toMove1 = $(this).parents('.parent'); $(toMove1).insertBefore($(toMove1).prev()); handleEvents(); }); } /* Disable top & down buttons for the first and the last article respectively in the result list */ function handleEvents() { $(".top-btn, .down-btn").prop("disabled", false).show(); $(".parent:first").find(".top-btn").prop("disabled", true).hide(); $(".parent:last").find(".down-btn").prop("disabled", true).hide(); } $(document).ready(function(){ $('#showExtForm-btn').click(function(){ $('#extUser').toggle(); }); $("#extArticleForm").submit(function(){ addExtUser(); return false; }); }); function addExtUser() { var name= $("#name").val(); var imgsrc = $("#myImg").val(); var dob = $("#dob").val(); var errors = []; extObj = {}; extObj = {}; extObj["name"]["title"] = "mr"; extObj["name"]["first"] = name; extObj["dob"] = dob; extObj["picture"]["thumbnail"] = imgsrc; savedData.push(extObj); if (savedData.get(imgsrc)) { errors.push(title); } else { $('.container').append( $('
').addClass('parent').append( $('').addClass('dataLabel').text('Name: '), +name+ $('
'), // line-break between name & pic $('').addClass('myLink').attr('src', imgsrc), $('
'), $('').addClass('dataLabel').text('Date of birth: '), +dob+ $('
'), $('').addClass('dataLabel').text('Address: '), $('
'), +address+ $('
'), $('').addClass('removeMe').text('Delete'), $('').addClass('top-btn').text('Swap with top'), $('').addClass('down-btn').text('Swap with down') ) ); resetEvents(); } 

 table, th, td { border: 1px solid #ddd; border-collapse: collapse; padding: 10px; } .parent { height: 25%; width: 90%; padding: 1%; margin-left: 1%; margin-top: 1%; border: 1px solid black; } .parent:nth-child(odd){ background: skyblue; } .parent:nth-child(even){ background: green; } label { float: left; width: 80px; } input, textarea { width: 130px; } #extUser { border: 1px solid lightgrey; border-radius: 5px; display: none; padding: 10px; background-color: skyblue; } #extUserForm { margin: 3px; padding: 5px; } 

 Create Table 
 
Select
Name
DOB
 
 Save Selected 
 
 Get Saved Data Open External Form 
 
 
 Name:  
 
 
 Image:  
 
 
 DOB:  
 
 Submit 
  

Answer 1

表单提交存在问题：

• 你在提交按钮上有onclick="addExtUser()" ，但是虽然你在该函数中返回false ，但忽略此返回值。 应该是onclick="return addExtUser()" 。

• 表单的提交事件还有一个监听器，它也调用addExtUser 。 但是，表单的id拼写错误：它应该是$("#extUserForm").submit而不是$("#extArticleForm").submit 。

• 但是您只需要一种方法来调用addExtUser ，因此请删除上述方法之一。 我会建议第二种方式（纠正拼写）。

您可能希望首先隐藏表单，因此向HTML添加style="display:none" 。

有一些代码重复，因为addExtUser有很多与refreshDisplay相同的代码：你应该在将数据添加到savedData后调用refreshDisplay 。

请注意， savedData.push不是Map上的有效方法，但我建议使用普通数组（请参阅关于交换记录的其他问题）。

定义对象的方式与JSON语法非常相似。 这不起作用：

 extObj = {}; extObj["name"]["title"] = "mr"; 

但这会：

 var extObj = { name: { title: "mr", // No ladies? :-) first: $("#name").val(), // Last name ? }, dob: $("#dob").val(), picture: { thumbnail: $("#myImg").val() }, location: { // maybe also ask for this info? } }; 

这是一个实现所有这一切的片段：

 function createTable() { $.getJSON("https://api.randomuser.me/?results=5", function(data) { $('#datatable tr:has(td)').remove(); data.results.forEach(function (record) { var json = JSON.stringify(record); $('#datatable').append( $('').append( $('').append( $('').attr('type', 'checkbox') .addClass('selectRow') .val(json) ), $('').append( $('').attr('href', record.picture.thumbnail) .addClass('imgurl') .attr('target', '_blank') .text(record.name.first) ), $('').append(record.dob) ) ); }) }).fail(function(error) { console.log("**********AJAX ERROR: " + error); }); } var savedData = []; // The objects as array, so to have an order. function saveData(){ var errors = []; // Add selected to map $('input.selectRow:checked').each(function(count) { // Get the JSON that is stored as value for the checkbox var obj = JSON.parse($(this).val()); // See if this URL was already collected (that's easy with Set) if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) { errors.push(obj.name.first); } else { // Append it savedData.push(obj); } }); refreshDisplay(); if (errors.length) { alert('The following were already selected:\n' + errors.join('\n')); } } function refreshDisplay() { $('.container').html(''); savedData.forEach(function (obj) { // Reset container, and append collected data (use jQuery for appending) $('.container').append( $('
').addClass('parent').append( $('').addClass('dataLabel').text('Name: '), obj.name.first + ' ' + obj.name.last, $('
'), // line-break between name & pic $('').addClass('myLink').attr('src', obj.picture.thumbnail), $('
'), $('').addClass('dataLabel').text('Date of birth: '), obj.dob, $('
'), $('').addClass('dataLabel').text('Address: '), $('
'), obj.location.street, $('
'), obj.location.city + ' ' + obj.location.postcode, $('
'), obj.location.state, $('
'), $('').addClass('removeMe').text('Delete'), $('').addClass('top-btn').text('Swap with top'), $('').addClass('down-btn').text('Swap with down') ) ); }) // Clear checkboxes: $('.selectRow').prop('checked', false); handleEvents(); } function logSavedData(){ // Convert to JSON and log to console. You would instead post it // to some URL, or save it to localStorage. console.log(JSON.stringify(savedData, null, 2)); } function getIndex(elem) { return $(elem).parent('.parent').index(); } $(document).on('click', '.removeMe', function() { // Delete this from the saved Data savedData.splice(getIndex(this), 1); // And redisplay refreshDisplay(); }); /* Swapping the displayed articles in the result list */ $(document).on('click', ".down-btn", function() { var index = getIndex(this); // Swap in memory savedData.splice(index, 2, savedData[index+1], savedData[index]); // And redisplay refreshDisplay(); }); $(document).on('click', ".top-btn", function() { var index = getIndex(this); // Swap in memory savedData.splice(index-1, 2, savedData[index], savedData[index-1]); // And redisplay refreshDisplay(); }); /* Disable top & down buttons for the first and the last article respectively in the result list */ function handleEvents() { $(".top-btn, .down-btn").prop("disabled", false).show(); $(".parent:first").find(".top-btn").prop("disabled", true).hide(); $(".parent:last").find(".down-btn").prop("disabled", true).hide(); } $(document).ready(function(){ $('#showExtForm-btn').click(function(){ $('#extUser').toggle(); }); $("#extUserForm").submit(function(e){ addExtUser(); return false; }); }); function addExtUser() { var extObj = { name: { title: "mr", // No ladies? :-) first: $("#name").val(), // Last name ? }, dob: $("#dob").val(), picture: { thumbnail: $("#myImg").val() }, location: { // maybe also ask for this info? } }; savedData.push(extObj); refreshDisplay(); // Will show some undefined stuff (location...) } 

 table, th, td { border: 1px solid #ddd; border-collapse: collapse; padding: 10px; } .parent { height: 25%; width: 90%; padding: 1%; margin-left: 1%; margin-top: 1%; border: 1px solid black; } .parent:nth-child(odd){ background: skyblue; } .parent:nth-child(even){ background: green; } label { float: left; width: 80px; } input { width: 130px; } 

  Create Table 
 
Select
Name
DOB
 
 Save Selected 
 
 Get Saved Data Open External Form 
 
 
 Name:  
 
 
 Image:  
 
 
 DOB:  
 
 Submit