jQuery技术:将外部对象添加到现有数组-计算机技术网

我有一个基于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, $('
'), $('

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

   Select Name DOB
 
  
 
      Name:  
 
  Image:  
 
  DOB:

表单提交存在问题：

您可能希望首先隐藏表单，因此向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, $('
'), $('

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

    Select Name DOB
 
  
 
      Name:  
 
  Image:  
 
  DOB:

以上就是jQuery教程分享将外部对象添加到现有数组相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/jquerytutorial/558220.html

jQuery技术:将外部对象添加到现有数组

精彩推荐