Save the dynamically created DOM and create a JSON

Save the dynamically created DOM and create a JSON

I need help for creating the JSON of the dynamicallly created dom objects which has exactly the same format, which was while receiving the JSON to create the dynamic element.

To simplify thing, I've create a dummy application, which is available in the JSFiddle link provided below.

Now, if you see, in the table I'm getting the data through JSON.
The checkbox values in the table are JSON objects. 
When I select any of the checkboxes and click on Save, the corresponding div is generated and displayed.

 Now, I want to save this dynamically created DOM structure using the "Save displayed data and create json'" button and also create the JSON which will be of the same format (containg all the properties (irrespective of the fact, whether they were displayed or not in the corresponding parent. for e.g., the phone number, images all the data should be available in the JSON, even it is not displayed but is available in the original JSON).


How could we achieve this?
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style>
  5. table, th, td {
  6. border: 1px solid #ddd;
  7. border-collapse: collapse;
  8. padding: 10px;
  9. }

  10. table {
  11. margin: auto;
  12. }

  13. .parent {
  14. height: 25%;
  15. width: 90%;
  16. padding: 1%;
  17. margin-left: 1%;
  18. margin-top: 1%;
  19. border: 1px solid black;
  20. }

  21. .parent:nth-child(odd){
  22. background: skyblue;
  23. }

  24. .parent:nth-child(even){
  25. background: green;
  26. }
  27. </style>
  28. <body>
  29.   <button onclick="createTable()">Load Table</button>
  30.   <button onclick="saveData()">Save Table data</button>
  31. <table id="datatable" align="center">
  32. <tr><th>Select</th><th>Name</th><th>DOB</th></tr>
  33. </table>

  34. <br />
  35. <button onclick="createJson()">Save displayed data & create JSON</button>
  36. <br />
  37. <div class="container">
  38. <
  39. </div>

  40. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  41. <script>
  42. function createTable() {
  43. $.getJSON("https://api.randomuser.me/?results=5", function(data) {
  44. // First, clear the table
  45. $('#datatable tr:has(td)').remove();
  46. data.results.forEach(function (record) {
  47. var json = JSON.stringify(record);
  48. $('#datatable').append(
  49. $('<tr>').append(
  50. $('<td>').append(
  51. $('<input>').attr('type', 'checkbox')
  52. .addClass('selectRow')
  53. .val(json)
  54. ),
  55. $('<td>').append(
  56. $('<a>').attr('href', record.picture.thumbnail)
  57. .addClass('imgurl')
  58. .attr('target', '_blank')
  59. .text(record.name.first)
  60. ),
  61. $('<td>').append(record.dob)
  62. )
  63. );
  64. })
  65. }).fail(function(error) {
  66. console.log("**********AJAX ERROR: " + error);
  67. });            
  68. }

  69. function saveData(){
  70. // Scrape the URLs that were already collected into a Set:
  71. var used = new Set($('.myLink').map(function () {
  72. return $(this).attr('href');
  73. }).get());
  74. var errors = [];
  75. $('input.selectRow:checked').each(function(count) {
  76. // Get the JSON that is stored as value for the checkbox
  77. var obj = JSON.parse($(this).val());
  78. // See if this URL was already collected (that's easy with Set)
  79. if (used.has(obj.weburl)) {
  80. errors.push(obj.title);
  81. } else {
  82. // Append it to the collection (use jQuery for appending)
  83. $('.container').append(
  84. $('<div>').addClass('parent').append(
  85. $('<label>').addClass('dataLabel').text('Name: '),
  86. obj.name.first + ' ' + obj.name.last,
  87. $('<br>'), // line-break between name & pic
  88. $('<img>').attr('src', obj.picture.thumbnail), $('<br>'),
  89. $('<label>').addClass('dataLabel').text('Date of birth: '),
  90. obj.dob, $('<br>'),
  91. $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
  92. obj.location.street, $('<br>'),
  93. obj.location.city + ' ' + obj.location.postcode, $('<br>'),
  94. obj.location.state, $('<br>')
  95. )
  96. );
  97. }
  98. // Clear checkbox:
  99. $('input', this).prop('checked', false)
  100. });
  101. if (errors.length) 
  102. alert('The following were already selected:\n' + errors.join('\n'))
  103. }
  104. </script>

  105. </body>
  106. </head>
  107. </html>