保存動態創建的DOM，並創建一個JSON

我需要幫助創建具有完全相同的格式dynamicallly創建DOM對象，這是在接收JSON創建動態元素的JSON。保存動態創建的DOM，並創建一個JSON

請檢查JS小提琴鏈接，下面的源代碼。現在，如果您看到，我在表格中通過JSON獲取數據。表中的複選框值是JSON對象。當我選擇任何複選框，然後點擊保存，生成並顯示相應的股利。

現在，我想要使用「保存顯示的數據和創建json」按鈕來保存這個動態創建的DOM結構，並且還要創建具有相同格式的JSON（包含所有屬性（不管事實，他們是否被顯示或沒有相應的父母。對於例如，電話號碼，圖像的所有數據應該在JSON是可用，即使它不顯示，但可在原來的JSON）。

JS Fiddle

<!doctype html> 
<html> 
    <head> 
     <style> 
      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; 
      } 
     </style> 
     <body> 
      <button onclick="createTable()">Load Table</button> 
      <button onclick="saveData()">Save Table data</button> 
       <table id="datatable" align="center"> 
        <tr><th>Select</th><th>Name</th><th>DOB</th></tr> 
       </table> 

      <br /> 
      <button onclick="createJson()">Save displayed data & create JSON</button> 
      <br /> 
      <div class="container"> 
       < 
      </div> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
      <script> 
       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(
           $('<tr>').append(
            $('<td>').append(
             $('<input>').attr('type', 'checkbox') 
                .addClass('selectRow') 
                .val(json) 
            ), 
            $('<td>').append(
             $('<a>').attr('href', record.picture.thumbnail) 
               .addClass('imgurl') 
               .attr('target', '_blank') 
               .text(record.name.first) 
            ), 
            $('<td>').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(
           $('<div>').addClass('parent').append(
            $('<label>').addClass('dataLabel').text('Name: '), 
            obj.name.first + ' ' + obj.name.last, 
            $('<br>'), // line-break between name & pic 
            $('<img>').attr('src', obj.picture.thumbnail), $('<br>'), 
            $('<label>').addClass('dataLabel').text('Date of birth: '), 
            obj.dob, $('<br>'), 
            $('<label>').addClass('dataLabel').text('Address: '), $('<br>'), 
            obj.location.street, $('<br>'), 
            obj.location.city + ' ' + obj.location.postcode, $('<br>'), 
            obj.location.state, $('<br>') 
           ) 
          ); 
         } 
         // Clear checkbox: 
         $('input', this).prop('checked', false) 
        }); 
        if (errors.length) 
         alert('The following were already selected:\n' + errors.join('\n')) 
       } 
      </script> 

     </body> 
    </head> 
</html>

示例JSON

{ 
    "results": [ 
    { 
     "gender": "male", 
     "name": { 
     "title": "mr", 
     "first": "romain", 
     "last": "hoogmoed" 
     }, 
     "location": { 
     "street": "1861 jan pieterszoon coenstraat", 
     "city": "maasdriel", 
     "state": "zeeland", 
     "postcode": 69217 
     }, 
     "email": "[email protected]", 
     "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": "(065)-247-9303", 
     "id": { 
     "name": "BSN", 
     "value": "04242023" 
     }, 
     "picture": { 
     "large": "https://randomuser.me/api/portraits/men/83.jpg", 
     "medium": "https://randomuser.me/api/portraits/med/men/83.jpg", 
     "thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg" 
     }, 
     "nat": "NL" 
    } 
    ], 
    "info": { 
    "seed": "2da87e9305069f1d", 
    "results": 1, 
    "page": 1, 
    "version": "1.1" 
    } 
}

來源

2017-04-07 Sunny

更好地分享您的JSON而不是API調用數據 –

我已經用示例JSON更新了這個問題。 – Sunny

聽起來好像你需要一個用戶選擇模型和一個源數據模型。然後，您只需執行該選擇的投影，用源數據替換項目。你不需要在DOM中這樣做，你不應該這樣做。 –

您可以更改您的代碼，以便在每次保存操作時，您不僅可以將數據添加到div，還可以添加到全局變量中，在該全局變量中添加與複選框的值屬性中完全相同的數據。

然後，在另一個操作中，您只需將它輸出爲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(
 
       $('<tr>').append(
 
        $('<td>').append(
 
         $('<input>').attr('type', 'checkbox') 
 
            .addClass('selectRow') 
 
            .val(json) 
 
        ), 
 
        $('<td>').append(
 
         $('<a>').attr('href', record.picture.thumbnail) 
 
           .addClass('imgurl') 
 
           .attr('target', '_blank') 
 
           .text(record.name.first) 
 
        ), 
 
        $('<td>').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(
 
      $('<div>').addClass('parent').append(
 
       $('<label>').addClass('dataLabel').text('Name: '), 
 
       obj.name.first + ' ' + obj.name.last, 
 
       $('<br>'), // line-break between name & pic 
 
       $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'), 
 
       $('<label>').addClass('dataLabel').text('Date of birth: '), 
 
       obj.dob, $('<br>'), 
 
       $('<label>').addClass('dataLabel').text('Address: '), $('<br>'), 
 
       obj.location.street, $('<br>'), 
 
       obj.location.city + ' ' + obj.location.postcode, $('<br>'), 
 
       obj.location.state, $('<br>'), 
 
       $('<button>').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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="createTable()">Create Table</button> 
 
<table id="datatable"> 
 
    <tr><th>Select</th><th>Name</th><th>DOB</th></tr> 
 
</table> 
 
<button onclick="saveData()">Save Selected</button> 
 
<br /> 
 
<div class="container"></div> 
 
<button onclick="logSavedData()">Get Saved Data</button>

來源

2017-04-07 12:40:36 trincot

這種情況下有一個小問題。它允許我從表中添加相同的用戶，儘管它存在於div.container中。 – Sunny

另外，假設每個div.parent中都有一個刪除按鈕，點擊它可以刪除相應的div.parent。如何從savedData JSON中刪除相同的以及刪除的div.parent？我的按鈕 - ;

我認爲使用jquery數據表對這個功能會更有幫助。您可以執行許多操作，例如直接/按數據表中的列從ajax調用綁定JSON，並自定義所呈現的html內容的DOM。還有一個可以導出數據的函數fileSave。

注意：任何$('cssselector').Datatable內容必須以JSON形式。

欲瞭解更多信息請查看datatables ajax data source和custom buttons extension的數據表 - 從API文檔。使用具有適當的parseandSaveJson函數的自定義按鈕可以完成您所需要的工作。

來源

2017-04-07 10:56:53 Hskdopi

相關問題

保存動態創建的DOM，並創建一個JSON

回答

相關問題