將外部對象添加到現有陣列

我有一個基於JSON數據進行更新的表。表中的每一行都有一個複選框，其中包含相應JSON對象的值，基本上是有關任何用戶的信息。在選擇任何行並保存以顯示選定的用戶配置文件時，我還將選定的JSON對象存儲在數組'savedData'中。將外部對象添加到現有陣列

我也有一個選擇，通過點擊「打開外部窗體」按鈕彈出的窗體添加外部用戶。現在，我試圖創建一個對象，並在提交該表單時將其存儲在同一個'savedData'數組中。同時，應將'div.parent'生成的&以與從表格中選擇的其他用戶相同的格式附加到'div.container'。

不幸的是，'div.parent'沒有被創建，並且外部對象沒有被添加。

你能幫我解決這個問題嗎？

function createTable() { 
 
\t \t \t $.getJSON("https://api.randomuser.me/?results=5", function(data) { 
 
\t \t \t \t $('#datatable tr:has(td)').remove(); 
 
\t \t \t \t data.results.forEach(function (record) { 
 
\t \t \t \t \t var json = JSON.stringify(record); 
 
\t \t \t \t \t $('#datatable').append(
 
\t \t \t \t \t \t $('<tr>').append(
 
\t \t \t \t \t \t \t $('<td>').append(
 
\t \t \t \t \t \t \t \t $('<input>').attr('type', 'checkbox') 
 
\t \t \t \t \t \t \t \t \t \t \t .addClass('selectRow') 
 
\t \t \t \t \t \t \t \t \t \t \t .val(json) 
 
\t \t \t \t \t \t \t), 
 
\t \t \t \t \t \t \t $('<td>').append(
 
\t \t \t \t \t \t \t \t $('<a>').attr('href', record.picture.thumbnail) 
 
\t \t \t \t \t \t \t \t \t \t .addClass('imgurl') 
 
\t \t \t \t \t \t \t \t \t \t .attr('target', '_blank') 
 
\t \t \t \t \t \t \t \t \t \t .text(record.name.first) 
 
\t \t \t \t \t \t \t), 
 
\t \t \t \t \t \t \t $('<td>').append(record.dob) 
 
\t \t \t \t \t \t) 
 
\t \t \t \t \t); 
 
\t \t \t \t }) 
 
\t \t \t }).fail(function(error) { 
 
\t \t \t \t console.log("**********AJAX ERROR: " + error); 
 
\t \t \t });    
 
\t \t } 
 

 
\t \t var savedData = new Map; // Keyed by image URL. Start with nothing. 
 

 
\t \t function saveData(){ 
 
\t \t \t var errors = []; 
 
\t \t \t // Add selected to map 
 
\t \t \t $('input.selectRow:checked').each(function(count) { 
 
\t \t \t \t // Get the JSON that is stored as value for the checkbox 
 
\t \t \t \t var obj = JSON.parse($(this).val()); 
 
\t \t \t \t // See if this URL was already collected (that's easy with Set) 
 
\t \t \t \t if (savedData.get(obj.picture.thumbnail)) { 
 
\t \t \t \t \t errors.push(obj.name.first); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t // Append it to the Map: 
 
\t \t \t \t \t savedData.set(obj.picture.thumbnail, obj); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t refreshDisplay(); 
 
\t \t \t if (errors.length) { 
 
\t \t \t \t alert('The following were already selected:\n' + errors.join('\n')); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t function refreshDisplay() { 
 
\t \t \t $('.container').html(''); 
 
\t \t \t savedData.forEach(function (obj) { 
 
\t \t \t \t // Reset container, and append collected data (use jQuery for appending) 
 
\t \t \t \t $('.container').append(
 
\t \t \t \t \t $('<div>').addClass('parent').append(
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Name: '), 
 
\t \t \t \t \t \t obj.name.first + ' ' + obj.name.last, 
 
\t \t \t \t \t \t $('<br>'), // line-break between name & pic 
 
\t \t \t \t \t \t $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'), 
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Date of birth: '), 
 
\t \t \t \t \t \t obj.dob, $('<br>'), 
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Address: '), $('<br>'), 
 
\t \t \t \t \t \t obj.location.street, $('<br>'), 
 
\t \t \t \t \t \t obj.location.city + ' ' + obj.location.postcode, $('<br>'), 
 
\t \t \t \t \t \t obj.location.state, $('<br>'), 
 
\t \t \t \t \t \t $('<button>').addClass('removeMe').text('Delete'), 
 
\t \t \t \t \t \t $('<button>').addClass('top-btn').text('Swap with top'), 
 
\t \t \t \t \t \t $('<button>').addClass('down-btn').text('Swap with down') 
 
\t \t \t \t \t) \t 
 
\t \t \t \t); 
 
\t \t \t \t resetEvents(); 
 
\t \t \t }) 
 
\t \t \t // Clear checkboxes: 
 
\t \t \t $('.selectRow').prop('checked', false); 
 
\t \t } 
 

 
\t \t function logSavedData(){ 
 
\t \t \t // Translate Map to array of values: 
 
\t \t \t var data = Array.from(savedData, function (pair) { 
 
\t \t \t \t return pair[1]; 
 
\t \t \t }); 
 
\t \t \t // Convert to JSON and log to console. You would instead post it 
 
\t \t \t // to some URL, or save it to localStorage. 
 
\t \t \t console.log(JSON.stringify(data, null, 2)); 
 
\t \t } 
 

 
\t \t $(document).on('click', '.removeMe', function() { 
 
\t \t \t var key = $('.myLink', $(this).parent()).attr('src'); 
 
\t \t \t // Delete this from the saved Data 
 
\t \t \t savedData.delete(key); 
 
\t \t \t // And redisplay 
 
\t \t \t refreshDisplay(); 
 
\t \t }); 
 
\t \t 
 
\t \t \t /* Swapping the displayed articles in the result list */ 
 
\t \t \t function resetEvents() { 
 

 
\t \t \t \t $(".top-btn, .down-btn").unbind('click'); 
 

 
\t \t \t \t handleEvents(); 
 
\t \t \t \t 
 
\t \t \t \t $('.down-btn').click(function() { 
 
\t \t \t \t \t var toMove1 = $(this).parents('.parent'); 
 

 
\t \t \t \t \t $(toMove1).insertAfter($(toMove1).next()); 
 

 
\t \t \t \t \t handleEvents(); 
 
\t \t \t \t }); 
 

 
\t \t \t \t $('.top-btn').click(function() { 
 
\t \t \t \t \t var toMove1 = $(this).parents('.parent'); 
 
\t \t \t \t \t 
 
\t \t \t \t \t $(toMove1).insertBefore($(toMove1).prev()); 
 
\t \t \t \t \t handleEvents(); 
 
\t \t \t \t }); 
 

 
\t \t \t } 
 
\t \t \t \t 
 
\t \t \t /* Disable top & down buttons for the first and the last article respectively in the result list */ 
 
\t \t \t function handleEvents() { 
 
\t \t \t \t $(".top-btn, .down-btn").prop("disabled", false).show(); 
 

 
\t \t \t \t $(".parent:first").find(".top-btn").prop("disabled", true).hide(); 
 

 
\t \t \t \t $(".parent:last").find(".down-btn").prop("disabled", true).hide(); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t $(document).ready(function(){ 
 
\t \t \t \t $('#showExtForm-btn').click(function(){ 
 
\t \t \t \t \t $('#extUser').toggle(); 
 
\t \t \t \t }); 
 
\t \t \t \t $("#extArticleForm").submit(function(){ 
 

 
        addExtUser(); 
 
        return false; 
 
       }); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t function addExtUser() { 
 
\t \t \t \t var name= $("#name").val(); 
 
\t \t \t \t var imgsrc = $("#myImg").val(); 
 
\t \t \t \t var dob = $("#dob").val(); 
 
\t \t \t \t 
 
\t \t \t \t var errors = []; 
 
       extObj = {}; 
 
\t \t \t \t extObj = {}; 
 
\t \t \t \t extObj["name"]["title"] = "mr"; 
 
\t \t \t \t extObj["name"]["first"] = name; 
 
\t \t \t \t extObj["dob"] = dob; 
 
\t \t \t \t extObj["picture"]["thumbnail"] = imgsrc; 
 
\t \t \t \t savedData.push(extObj); 
 
\t \t \t \t if (savedData.get(imgsrc)) { 
 
\t \t \t \t \t \t errors.push(title); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t $('.container').append(
 
\t \t \t \t \t $('<div>').addClass('parent').append(
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Name: '), 
 
\t \t \t \t \t \t +name+ 
 
\t \t \t \t \t \t $('<br>'), // line-break between name & pic 
 
\t \t \t \t \t \t $('<img>').addClass('myLink').attr('src', imgsrc), $('<br>'), 
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Date of birth: '), 
 
\t \t \t \t \t \t +dob+ $('<br>'), 
 
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Address: '), $('<br>'), 
 
\t \t \t \t \t \t +address+ $('<br>'), 
 
\t \t \t \t \t \t $('<button>').addClass('removeMe').text('Delete'), 
 
\t \t \t \t \t \t $('<button>').addClass('top-btn').text('Swap with top'), 
 
\t \t \t \t \t \t $('<button>').addClass('down-btn').text('Swap with down') 
 
\t \t \t \t \t) \t 
 
\t \t \t \t); 
 
\t \t \t \t resetEvents(); 
 
\t \t \t \t 
 
\t \t \t }

table, th, td { 
 
\t \t \t border: 1px solid #ddd; 
 
\t \t \t border-collapse: collapse; 
 
\t \t \t padding: 10px; 
 
\t \t } 
 

 
\t \t .parent { 
 
\t \t \t height: 25%; 
 
\t \t \t width: 90%; 
 
\t \t \t padding: 1%; 
 
\t \t \t margin-left: 1%; 
 
\t \t \t margin-top: 1%; 
 
\t \t \t border: 1px solid black; 
 

 
\t \t } 
 

 
\t \t .parent:nth-child(odd){ 
 
\t \t \t background: skyblue; 
 
\t \t } 
 

 
\t \t .parent:nth-child(even){ 
 
\t \t \t background: green; 
 
\t \t } 
 
\t \t 
 
\t \t label { 
 
\t \t \t float: left; 
 
\t \t \t width: 80px; 
 
\t \t } 
 
\t \t input, textarea { 
 
\t \t \t width: 130px; 
 
\t \t } 
 
\t \t 
 
\t \t #extUser { 
 
\t \t \t border: 1px solid lightgrey; 
 
\t \t \t border-radius: 5px; 
 
\t \t \t display: none; 
 
\t \t \t padding: 10px; 
 
\t \t \t background-color: skyblue; 
 
\t \t } 
 
\t \t 
 
\t \t #extUserForm { 
 
\t \t \t margin: 3px; 
 
\t \t \t padding: 5px; 
 
\t \t }

<button onclick="createTable()">Create Table</button> 
 
\t \t <table id="datatable"> 
 
\t \t \t <tr><th>Select</th><th>Name</th><th>DOB</th></tr> 
 
\t \t </table> 
 
\t \t <button onclick="saveData()">Save Selected</button> 
 
\t \t <br /> 
 
\t \t <div class="container"></div> 
 
\t \t <button onclick="logSavedData()">Get Saved Data</button> 
 
\t \t <button id="showExtForm-btn">Open External Form</button> 
 
\t \t 
 
\t \t <div id="extUser"> 
 
\t \t \t <form id="extUserForm"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t <label for="name">Name:</label> 
 
\t \t \t \t \t <input type="text" id="name" required> 
 
\t \t \t \t </p> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t <label for="myImg">Image:</label> 
 
\t \t \t \t \t <input type="url" id="myImg" required> 
 
\t \t \t \t </p> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t <label for="dob">DOB:</label> 
 
\t \t \t \t \t <input type="date" id="dob" required> 
 
\t \t \t \t </p> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <button onclick="addExtUser()">Submit</button> 
 
\t \t \t </form> 
 
\t \t </div>

來源

2017-04-11 Sunny

有一個與表單提交的問題：你提交按鈕有onclick="addExtUser()"

，但是你雖在該函數返回false，這個返回值是忽略。它應該是onclick="return addExtUser()"。
有一個表單的提交事件的監聽器，該監聽器還調用addExtUser。但是，表單的ID拼寫錯誤：它應該是$("#extUserForm").submit而不是$("#extArticleForm").submit。
但是您只需要一種方法調用addExtUser，所以刪除上面的一個。我會建議第二種方式（糾正拼寫）。

您可能希望首先隱藏表單，因此請將style="display:none"添加到HTML中。

有一些代碼重複，如addExtUser有很多的共同點代碼refreshDisplay：已增加的數據savedData後，你應該叫refreshDisplay。

請注意savedData.push不是Map上的有效方法，但我會建議使用普通數組（請參閱交換記錄的其他問題）。

定義對象的方式與JSON語法非常相似。這是行不通的：

extObj = {}; 
extObj["name"]["title"] = "mr";

但這會：

var extObj = { 
    name: { 
     title: "mr", // No ladies? :-) 
     first: $("#name").val(), 
     // Last name ? 
    }, 
    dob: $("#dob").val(), 
    picture: { 
     thumbnail: $("#myImg").val() 
    }, 
    location: { // maybe also ask for this info? 
    } 
};

這裏是實現這一切的一個片段：

function createTable() { 
 
    $.getJSON("https://api.randomuser.me/?results=5", 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 = []; // The objects as array, so to have an order. 
 

 
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.find(record => record.picture.thumbnail === obj.picture.thumbnail)) { 
 
      errors.push(obj.name.first); 
 
     } else { 
 
      // Append it 
 
      savedData.push(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'), 
 
       $('<button>').addClass('top-btn').text('Swap with top'), 
 
       $('<button>').addClass('down-btn').text('Swap with down') 
 
      ) \t 
 
     ); 
 
    }) 
 
    // Clear checkboxes: 
 
    $('.selectRow').prop('checked', false); 
 
    handleEvents(); 
 
} 
 

 
function logSavedData(){ 
 
    // Convert to JSON and log to console. You would instead post it 
 
    // to some URL, or save it to localStorage. 
 
    console.log(JSON.stringify(savedData, null, 2)); 
 
} 
 

 
function getIndex(elem) { 
 
    return $(elem).parent('.parent').index(); 
 
} 
 

 
$(document).on('click', '.removeMe', function() { 
 
    // Delete this from the saved Data 
 
    savedData.splice(getIndex(this), 1); 
 
    // And redisplay 
 
    refreshDisplay(); 
 
}); 
 

 
/* Swapping the displayed articles in the result list */ 
 
$(document).on('click', ".down-btn", function() { 
 
    var index = getIndex(this); 
 
    // Swap in memory 
 
    savedData.splice(index, 2, savedData[index+1], savedData[index]); 
 
    // And redisplay 
 
    refreshDisplay(); 
 
}); 
 

 
$(document).on('click', ".top-btn", function() { 
 
    var index = getIndex(this); 
 
    // Swap in memory 
 
    savedData.splice(index-1, 2, savedData[index], savedData[index-1]); 
 
    // And redisplay 
 
    refreshDisplay(); 
 
}); 
 
    
 
/* Disable top & down buttons for the first and the last article respectively in the result list */ 
 
function handleEvents() { 
 
    $(".top-btn, .down-btn").prop("disabled", false).show(); 
 
    $(".parent:first").find(".top-btn").prop("disabled", true).hide(); 
 
    $(".parent:last").find(".down-btn").prop("disabled", true).hide(); 
 
} 
 

 
$(document).ready(function(){ 
 
    $('#showExtForm-btn').click(function(){ 
 
     $('#extUser').toggle(); 
 
    }); 
 
    $("#extUserForm").submit(function(e){ 
 
     addExtUser(); 
 
     return false; 
 
    }); 
 
}); 
 

 
function addExtUser() { 
 
    var extObj = { 
 
     name: { 
 
      title: "mr", // No ladies? :-) 
 
      first: $("#name").val(), 
 
      // Last name ? 
 
     }, 
 
     dob: $("#dob").val(), 
 
     picture: { 
 
      thumbnail: $("#myImg").val() 
 
     }, 
 
     location: { // maybe also ask for this info? 
 
     } 
 
    }; 
 
    savedData.push(extObj); 
 
    refreshDisplay(); // Will show some undefined stuff (location...) 
 
}

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

 
label { 
 
    float: left; 
 
    width: 80px; 
 
} 
 
input { 
 
    width: 130px; 
 
}

<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> 
 
<button id="showExtForm-btn">Open External Form</button> 
 

 
<div id="extUser" style="display:none"> 
 
    <form id="extUserForm"> 
 
     <p> 
 
      <label for="name">Name:</label> 
 
      <input type="text" id="name" required> 
 
     </p> 
 
     <br /> 
 
     <p> 
 
      <label for="myImg">Image:</label> 
 
      <input type="url" id="myImg" required> 
 
     </p> 
 
     <br /> 
 
     <p> 
 
      <label for="dob">DOB:</label> 
 
      <input type="date" id="dob" required> 
 
     </p> 
 
     <br /> 
 
     <button>Submit</button> 
 
    </form> 
 
</div>

來源

2017-04-11 14:05:13 trincot

太好了，謝謝主席先生！ – Sunny

我添加了一個彈出窗口，其中包含之前的下一個按鈕。我遇到了一些我無法解決的問題。希望這是關於這個話題的最後一個問題！ - http://stackoverflow.com/questions/43361662/disable-the-first-previous-button-on-dynamic-page-numbers – Sunny

我會看看 – trincot

將外部對象添加到現有陣列

回答

相關問題