如果 DOM 中已经存在相同的 url（主键），则不要添加动态内容答案

【问题标题】：Do not add the dynamic content with same url(primary key) if it already exists in DOM如果 DOM 中已经存在相同的 url（主键），则不要添加动态内容
【发布时间】：2017-04-06 04:59:21
【问题描述】：

我正在开发一个应用程序，其中来自服务器 (JSON) 的数据部分显示在表格中。用户可以选择一些行，然后将其添加到具有更详细数据的另一个部分。

以下是此类 JSON 的示例：

示例 JSON：

{
    "error": false,
    "pageIndex": "0",
    "resultset": [{
        "title": "Google",
        "CreationDate": "Mar 14, 2017 4:06:00 PM",
        "location": "USA",
        "path": "www.google.com",
        "image": "www.google.com/images/logo.jpg"
    }, {
        "title": "Global",
        "CreationDate": "Mar 14, 2017 4:06:00 PM",
        "location": "Global",
        "path": "www.abc.com",
        "image": "www.abc.com/images/logo.jpg"
    }, {
        "title": "Yahoo",
        "CreationDate": "Mar 14, 2017 4:06:00 PM",
        "location": "Europe",
        "path": "www.yahoo.com",
        "image": "www.yahoo.com/images/logo.jpg"
    }, {
        "title": "Amazon",
        "CreationDate": "Mar 14, 2017 4:06:00 PM",
        "location": "Europe",
        "path": "www.amazon.com",
        "image": "www.amazon.com/images/logo.jpg"
    }, {
        "title": "XYZ",
        "CreationDate": "Mar 14, 2017 4:06:00 PM",
        "location": "Europe",
        "path": "www.xyz.com",
        "image": "www.xyz.com/images/logo.jpg"
    }
    }],
    "totalMatches": 35
}

我由此填充表格，在表格列中显示一些信息，但还将整个记录的数据作为 JSON 存储在每行复选框的 value 属性中。

所以，现在我使用表格中的复选框选择一行，然后单击“保存”按钮，然后将数据附加到带有class="container" 的静态div。

但是，如果具有相同weburl（如代码所示）的特定div 已存在于显示div.container 中，则不应再次添加它。

从屏幕截图中显示的表格中选择 A & D，然后点击“保存”。
A & D 被附加到div.container。
现在，从表中选择 A、D、G、J。

当前情况：没有添加任何内容，并且alert显示为“数据已存在！”

理想行为：G & J 应该附加到div.box 并且警报应该显示为“A 已经存在！”。

我尝试将div.parent 中的所有网址存储在一个数组中。同样，将从表中选择的每个 JSON 行的 url 存储在一个变量中。

接下来，我想比较一下tableURL（选中行的URL）是否存在于DOM中，那就不要添加了。

但是，不知何故，它不起作用！我如何做到这一点？

注意：URL(weburl) 在这里是唯一的。因此，拿它来做比较。

这是已填充表格的 HTML（但不是 input 元素的 value 属性，它们将具有 URL 编码的 JSON）：

<!doctype html>

    <html>
        <head>
            <style>
                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;
                }

            </style>
        </head>
        <body>
            <table>
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>Website</th>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectRow"></td>
                    <td class="name">A</td>
                    <td class="weburl"><a href="abc.com">ABC</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectRow"></td>
                    <td class="name">D</td>
                    <td class="weburl"><a href="def.com">DEF</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectRow"></td>
                    <td class="name">G</td>
                    <td class="weburl"><a href="ghi.com">GHI</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectRow"></td>
                    <td class="name">J</td>
                    <td class="weburl"><a href="jkl.com">JKL</a></td>
                </tr>
            </table>

            <button onclick="saveData()">Save</button>

            <br />

            <div class="container">

            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script>


                var content = "";
                dispUrl = [];
                function saveData(){


                $('input[name="selectRow"]:checked').map(function(count) {
                    var myJSON =  JSON.parse(decodeURIComponent(this.value));
                    var tableDataUrl = myJSON.weburl;
                    content += '<div class="parent"><label class="dataLabel">Name:</label>'+myJSON.name+'<label class="dataLabel">Website:</label><a href="'+myJSON.weburl+'" class="myLink"></div>';

                    $('.parent .myLink').each(function() {
                       dispUrl.push($(this).attr('href'));
                     });

                    //console.log(linkArr);

                var isRendered = $.inArray(tableDataUrl, dispUrl);
                //alert(isRendered);

                  if(!isRendered) { 
                    $('.container').html(content);
                    resetEvents();
                  } else {
                    alert("Div already added to the result list!");
                  }  

             }

            }

            </script>
        </body>
    </html>

编辑：

让我们在表格中说，我想要以下内容：

用于选择特定行的复选框。
标题（例如 Google），它是一个带有 href = path 的超链接。
创建日期。

现在，在要显示的内容中（就像我们之前所做的那样），在我选择一行之后，假设我要显示：标题（带有指向路径的超链接）、位置、图像。

【问题讨论】：

标签： javascript jquery arrays dom dynamic

【解决方案1】：

你可以使用这个工作的 sn-p：

function createTable() {
    $.getJSON("https://api.randomuser.me/?results=25", 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('src');
    }).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.picture.thumbnail)) {
            errors.push(obj.name.first);
        } 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>').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>')
                )
            );
        }
        // Clear checkbox:
        $(this).prop('checked', false)
    });
    if (errors.length) 
        alert('The following were already selected:\n' + errors.join('\n'))
}

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()">Load Table</button>
<table id="datatable">
    <tr><th>Select</th><th>Name</th><th>DOB</th></tr>
</table>
<button onclick="saveData()">Save</button>
<br />
<div class="container"></div>

【讨论】：

非常感谢您的帮助！只是一个澄清，我如何获得未显示在表格中的值，但在填充表格数据的 JSON 中是否存在？例如，假设在您创建的“obj”中，您只收到显示表格的值。但是 JSON 包含许多我想要显示的其他属性。在这种情况下，如何在附加到 div.container 时显示它们？
我已经更新了我的答案，包括一些虚拟数据（在你的情况下，我假设这些数据是从你通过 Ajax 收到的 JSON 解析的）。解析后的数据需要通过 weburl 进行键控，以便更快地查找，最后使用变得相当简单。请参阅更新，它还显示不在表中的属性，仅在数据中。注意：不要调用变量json，当它们不是 JSON 字符串，而是 JavaScript 数组/对象，它不再是 JSON。在被解析之前，它的文本版本被称为 JSON。
OK，但是原理是一样的。您在实施方面还有什么问题吗？
我该如何使用 - "var keyedData= JSON.parse(decodeURIComponent(this.value)); "这里？因为，我通过 URL 获取 JSON。我相信这种方法会导致问题！
完美！谢谢你，鞠躬先生！

【解决方案2】：

我对您的代码进行了一些更改。请通过 cmets 询问我是否需要帮助。我不知道你真正想要做什么，但我已经创建了检查链接是否已经添加的条件，你不能将相应的代码放在这些条件中：

var addedUrls;
function saveData() {
    addedUrls = [];

    var addedElements  = $(".myLink");
    for(var i = 0;i<addedElements.length;i++){
        //adds links present in .container class to addedUrls array
        addedUrls.push($(addedElements[i]).attr("href"));
    }

    var selectedElements = $(".selectRow:checked");
    for(var i = 0;i<selectedElements.length;i++){
        var selectedLink = $(selectedElements[i]).parent().next().next().text();
        if($.inArray( selectedLink, addedUrls ) == -1){
            //if the selected link is not present .container
        }
        else{
            //if the selected link is alread present in .container
        }
    }

}

【讨论】：