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. Pleas

Solution 1:

You could alter your code so that at every save action, you not only add the data to the div, but also to a global variable, in which you would add the exact same data that you have in the checkbox's value attribute.

Then, in another action, you would just need to output that as JSON to where ever you need it (posted to a URL, saved in localStorage, ...).

Here is the code, which has an extra button to output the JSON of the collected items to the console:

functioncreateTable() {
    $.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 = newMap; // Keyed by image URL. Start with nothing.functionsaveData(){
    var errors = [];
    // Add selected to map
    $('input.selectRow:checked').each(function(count) {
        // Get the JSON that is stored as value for the checkboxvar 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'));
    }
}

functionrefreshDisplay() {
    $('.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);
}

functionlogSavedData(){
    // 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 redisplayrefreshDisplay();
});

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

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

Solution 2:

I think it would be much more helpful to use jquery datatables for this functionality. You can do many things such as bind JSON from ajax calls directly/per column on the datatable and customize the DOM of the rendered html content. There is also a fileSave function that can export data.

NOTE: Any $('cssselector').Datatable content has to be in Json form.

For more info check out datatables ajax data source and custom buttons extension for datatables - from the API documentation. Using a custom button with an appropriate parseandSaveJson function will do the work you need.