檢查JSON資料是否具有特定型別，然后附加到jQuery

我有一些從 Excel 檔案中決議的 JSON 資料。我想弄清楚的一件事是，如果 JSON 資料中的名字等于名字資料中的名字，那么將這些資料元素附加到特定的 div。另一件事是，如果 JSON 資料具有“狀態”，則將 HTML 元素附加到該特定元素以進行匹配。例如：

JSON：

0: Object { "First Name": "Dave", "Last Name": "Jones", "Title": "Cool Dude"}
?
1: Object { "First Name": "Dave", "Last Name": "Simpson", "Title": "Other Dude", "Status": "Owner"}
?
2: Object { "First Name": "Mike", "Last Name": "Jones", "Title": "The Guy", "Status": "Owner"}
?
3: Object { "First Name": "Mike", "Last Name": "Hampton", "Title": "Worker", "Status": "Employee"} 
?
4: Object { "First Name": "Dave", "Last Name": "Reilly", "Title": "Person"}

JS：

$.each(jData, function (i, f) {
    var name = f["First Name"];
    var status = f["Status"];
    var el =
        "<div class='item'><p>"  
        f["First Name"]  
        "</p></div>";
    if (name == "Dave") {
        $(el).appendTo("#nameDave");
    }
    if (name == "Mike") {
        $(el).appendTo("#nameMike");
    }
    if (status == "Owner" || status == "Employee") {
    $("<small>*</small>").appendTo(".item p");
}
  });

HTML：

<div id="nameDave"></div>

<div id="nameMike"></div>

總的來說，我可以name基于status. 我現在擁有 JS 的方式是將 附加<small>*</small>到每個不正確的專案。我不確定如何檢查status每個物件是否存在，如果存在，只需附加到該特定元素。本質上：

輸出：

<div id="nameDave">
   <div class='item'><p>Dave</p></div>
   <div class='item'><p>Dave<small>*</small></p></div>
   <div class='item'><p>Dave</p></div>
</div>

<div id="nameMike">
   <div class='item'><p>Mike<small>*</small></p></div>
   <div class='item'><p>Mike<small>*</small></p></div>
</div>

這是我想要實作的目標，但目前并非如此。

uj5u.com熱心網友回復：

嘗試這個：

        let jData = [
            { "First Name": "Dave", "Last Name": "Jones", "Title": "Cool Dude" },
            { "First Name": "Dave", "Last Name": "Simpson", "Title": "Other Dude", "Status": "Owner" },
            { "First Name": "Mike", "Last Name": "Jones", "Title": "The Guy", "Status": "Owner" },
            { "First Name": "Mike", "Last Name": "Hampton", "Title": "Worker", "Status": "Employee" },
            { "First Name": "Dave", "Last Name": "Reilly", "Title": "Person" },
        ];

        $.each(jData, function (i, f) {
            var name = f["First Name"];
            var status = f["Status"];
            var el = "<div class='item'><p>"   f["First Name"];
            if (status == "Owner" || status == "Employee") {
                el  = "<small>*</small>";
            }
            el  = "</p></div>";


            if (name == "Dave") {
                $(el).appendTo("#nameDave");
            }
            if (name == "Mike") {
                $(el).appendTo("#nameMike");
            }

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nameDave"></div>
    <div id="nameMike"></div>

uj5u.com熱心網友回復：

您的問題在這里$("<small>*</small>").appendTo(".item p");，在這種情況下，您追加到所有item p而不是特定的..所以您需要在el追加之前將狀態 HTML 添加到第一個

$.each(jData, function (i, f) {
    var name = f["First Name"];
    var status = f["Status"] ? f["Status"] : "";
    var status_HTML = status == "Owner" || status == "Employee" ? "<small>*</small>" : "";
    var el =
        "<div class='item'><p>"  
        f["First Name"]   status_HTML  
        "</p></div>";
    if (name == "Dave") {
        $(el).appendTo("#nameDave");
    }
    if (name == "Mike") {
        $(el).appendTo("#nameMike");
    }
});

標籤：javascript html jQuery json

上一篇：根據語言環境正確排序月份和日期

下一篇：為什么盒子會在盒子里面向下移動？