保存动态创建的DOM并创建JSON

我需要帮助来创建具有完全相同格式的动态创建的dom对象的JSON，这是在接收JSON以创建动态元素时。

请检查JS Fiddle链接和下面的源代码。 现在，如果你看到，我在表中通过JSON获取数据。 表中的复选框值是JSON对象。 当我选中任何复选框并单击“保存”时，将生成并显示相应的div。

现在，我想使用“保存显示的数据并创建json”按钮来保存这个动态创建的DOM结构，并创建具有相同格式的JSON（包含所有属性（无论事实是否显示）或者不在相应的父级中。例如，电话号码，图像所有数据应该在JSON中可用，即使它没有显示但在原始JSON中可用）。

JS小提琴

    table, th, td { border: 1px solid #ddd; border-collapse: collapse; padding: 10px; } table { margin: auto; } .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; }   Load Table Save Table data 
 
Select
Name
DOB
 
 
 Save displayed data & create JSON 
 
 < 
   function createTable() { $.getJSON("https://api.randomuser.me/?results=5", function(data) { // First, clear the table $('#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); }); } function saveData(){ // Scrape the URLs that were already collected into a Set: var used = new Set($('.myLink').map(function () { return $(this).attr('href'); }).get()); var errors = []; $('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 (used.has(obj.weburl)) { errors.push(obj.title); } else { // Append it to the collection (use jQuery for appending) $('.container').append( $('
').addClass('parent').append( $('').addClass('dataLabel').text('Name: '), obj.name.first + ' ' + obj.name.last, $('
'), // line-break between name & pic $('').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, $('
') ) ); } // Clear checkbox: $('input', this).prop('checked', false) }); if (errors.length) alert('The following were already selected:\n' + errors.join('\n')) }     

---

示例JSON

 { "results": [ { "gender": "male", "name": { "title": "mr", "first": "romain", "last": "hoogmoed" }, "location": { "street": "1861 jan pieterszoon coenstraat", "city": "maasdriel", "state": "zeeland", "postcode": 69217 }, "email": "[e-mail]", "login": { "username": "lazyduck408", "password": "jokers", "salt": "UGtRFz4N", "md5": "6d83a8c084731ee73eb5f9398b923183", "sha1": "cb21097d8c430f2716538e365447910d90476f6e", "sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0" }, "dob": "1983-07-14 07:29:45", "registered": "2010-09-24 02:10:42", "phone": "(656)-976-4980", "cell": "[phone]", "id": { "name": "BSN", "value": "04242023" }, "picture": { "large": "http://sofzh.miximages.com/javascript/83.jpg", "medium": "http://sofzh.miximages.com/javascript/83.jpg", "thumbnail": "http://sofzh.miximages.com/javascript/83.jpg" }, "nat": "NL" } ], "info": { "seed": "2da87e9305069f1d", "results": 1, "page": 1, "version": "1.1" } } 

Answer 1

您可以更改代码，以便在每次保存操作时，您不仅可以将数据添加到div ，还可以添加到全局变量，在该变量中，您可以在复选框的value属性中添加完全相同的数据。

然后，在另一个操作中，您只需要将其作为JSON输出到您需要的位置（发布到URL，保存在localStorage中，……）。

这是代码，它有一个额外的按钮，用于将收集的项目的JSON输出到控制台：

 function createTable() { $.getJSON("https://api.randomuser.me/?results=25", 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') ) ); }) // 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(); }); 

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

  Create Table 
 
Select
Name
DOB
 
 Save Selected 
 
 Get Saved Data 

Answer 2

我认为使用jquery数据表来实现此function会更有帮助。 你可以在数据表上直接/每列从ajax调用中绑定JSON，并自定义渲染的html内容的DOM。 还有一个可以导出数据的fileSave函数。

注意：任何$('cssselector').Datatable内容必须是Jsonforms。

有关更多信息，请查看数据表ajax数据源和数据表的 自定义按钮扩展 – 来自API文档。 使用具有适当parseandSaveJson函数的自定义按钮将完成您需要的工作。