javascript - Save the dynamically created DOM and create a JSON -
i need creating json of dynamicallly created dom objects has same format, while receiving json create dynamic element.
please check js fiddle link , source code below. now, if see, in table i'm getting data through json. checkbox values in table json objects. when select of checkboxes , click on save, corresponding div generated , displayed.
now, want save dynamically created dom structure using "save displayed data , create json'" button , create json of same format (containg properties (irrespective of fact, whether displayed or not in corresponding parent. e.g., phone number, images data should available in json, not displayed available in original json).
<!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 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 urls collected set: var used = new set($('.mylink').map(function () { return $(this).attr('href'); }).get()); var errors = []; $('input.selectrow:checked').each(function(count) { // json stored value checkbox var obj = json.parse($(this).val()); // see if url collected (that's easy set) if (used.has(obj.weburl)) { errors.push(obj.title); } else { // append collection (use jquery 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 selected:\n' + errors.join('\n')) } </script> </body> </head> </html> sample json
{ "results": [ { "gender": "male", "name": { "title": "mr", "first": "romain", "last": "hoogmoed" }, "location": { "street": "1861 jan pieterszoon coenstraat", "city": "maasdriel", "state": "zeeland", "postcode": 69217 }, "email": "romain.hoogmoed@example.com", "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" } }
you alter code @ every save action, not add data div, global variable, in add exact same data have in checkbox's value attribute.
then, in action, need output json ever need (posted url, saved in localstorage, ...).
here code, has button output json of collected items console:
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 image url. start nothing. function savedata(){ var errors = []; // add selected map $('input.selectrow:checked').each(function(count) { // json stored value checkbox var obj = json.parse($(this).val()); // see if url collected (that's easy set) if (saveddata.get(obj.picture.thumbnail)) { errors.push(obj.name.first); } else { // append map: saveddata.set(obj.picture.thumbnail, obj); } }); refreshdisplay(); if (errors.length) { alert('the following selected:\n' + errors.join('\n')); } } function refreshdisplay() { $('.container').html(''); saveddata.foreach(function (obj) { // reset container, , append collected data (use jquery 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 array of values: var data = array.from(saveddata, function (pair) { return pair[1]; }); // convert json , log console. instead post // url, or save localstorage. console.log(json.stringify(data, null, 2)); } $(document).on('click', '.removeme', function() { var key = $('.mylink', $(this).parent()).attr('src'); // delete saved data saveddata.delete(key); // , 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>
Comments
Post a Comment