Check JSON data has specific type then appendTo jQuery-CodePudding

I have some JSON data that I'm parsing from an Excel file. The one thing I'm trying to figure out is if the First Name in the JSON data equals the name in the data of First Name, then append those data elements to a specific div. The other thing is that if the JSON data has a 'status', then append an HTML element to that specific element to match. For example:

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>

Overall I can get the data to append into the ID's of the HTML fine based off of the name, but the hangup is getting the asterisk to append to the ones that have the status. The way that I have the JS now, it's appending the <small>*</small> to each item which is not correct. I'm not sure how to check if the status exists for each object and if it does, just append to that specific element. Essentially:

OUTPUT:

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

Is what I am trying to achieve, but that's not the case currently.

CodePudding user response：

Try this:

        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>

CodePudding user response：

Your problem is here $("<small>*</small>").appendTo(".item p"); in this case you append to all item p not the specific one .. So you need to add the status HTML to the el first before you append it

$.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");
    }
});