0

I have a list of dynamic users with various occupations in a variety of industries, depending on their industry (health, education, construction, science, etc), I would like to add a color badge that is displayed dynamically depending on industry the user is in, in order quickly differentiate the users at a quick glance. The code works well when targeting the text values in a hard coded html environment but seems to break down when trying to reference the text values loaded from dynamic JSON.

I have included the code below.

Any help would be greatly appreciated!

Thanks, Steve.

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://mighty-oasis-08666.herokuapp.com/users'

//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON, function (populateUsers) {

    //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL CARD
    var userCard = populateUsers.reduce((acc, {id, name, username, email, phone, company, industry}) =>
            acc += `
            <div class='col col-4 align-items-stretch strain-container'>
                <div id="${id}" class="card user-card">
                    <div class="card-body">
                        <h2 class="title">${name}</h2>
                        <h6 class="title">${username}</h6>
                        <h6 class="title">${email}</h6>
                        <h6 class="title">${phone}</h6>
                        <h6 class="title">${company}</h6>
                        <h6 class="industry-type title">${industry}</h6>
                    </div>
                </div>
            </div>`
    , ``);
    $('#user-grid').append(userCard)
});

//THIS IS THE CODE TO TARGET INDUSTRY TYPE CLASS
var $industryType = $('.industry-type');

//THIS IS THE CODE TO ADD INDUSTRY BADGE BASED ON INDUSTRY TYPE TEXT VALUE
$industryType.each(function() {
    var $this = jQuery(this);
    if ($this.text().trim() == 'Health') {
        $this.addClass('health-badge');
    } else if ($this.text().trim() == 'Education') {
        $this.addClass('education-badge');
    } else if ($this.text().trim() == 'Construction') {
        $this.addClass('construction-badge');
    } else if ($this.text().trim() == 'Science') {
        $this.addClass('science-badge');
    }
});
.health-badge {
    background-color: purple;
    color: green;
    height: 80px;
    width: 80px;
}
.science-badge {
    background-color: black;
    color: yellow;
    height: 80px;
    width: 80px;
}
.construction-badge {
    background-color: blue;
    color: white;
    height: 80px;
    width: 80px;
}
.education-badge {
    background-color: orangered;
    color: black;
    height: 80px;
    width: 80px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    
<body>

<!-- USER GRID -->
<div id="user-grid" class="row container fluid-container"></div>   

</body>
Captain Steve
  • 61
  • 7
  • Breaks down how? Are you saying you've looked in the DOM and the classes are not being added? Additionally, sidenote: any time you find yourself writing largely repetitive code, always suspect there's a better way. – Mitya Feb 12 '21 at 15:42
  • You need to execute the `$.each()` loop after adding the new elements in the callback function. – Barmar Feb 12 '21 at 15:44
  • @Mitya Correct, the classes are not being added, for instance, if you added "education-badge" directly into the inspector here
    Education
    it would look correct, but I am unable to attach these industry badge classes to the dynamically generated text values. but like I said, when they are hardcoded text values, the code works...     – Captain Steve Feb 12 '21 at 15:48
  • @Barmar How would I do that in the code? – Captain Steve Feb 12 '21 at 15:49

1 Answers1

1

Add the class when adding the new elements.

You can use an object to hold the mapping between industry names and the corresponding badge classes, so you don't need all those if statements and can use this for both the static and dynamic code.

const industry_class = {
  "Health": "health-badge",
  "Education": "education-badge",
  "Construction": "construction-badge",
  "Science": "science-badge"
};

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://mighty-oasis-08666.herokuapp.com/users'

//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON, function(populateUsers) {

  //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL CARD
  var userCard = populateUsers.map(({id, name, username, email, phone, company, industry}) => {
    let cls = industry_class[industry.trim()] || "";
    return `
            <div class='col col-4 align-items-stretch strain-container'>
                <div id="${id}" class="card user-card">
                    <div class="card-body">
                        <h2 class="title">${name}</h2>
                        <h6 class="title">${username}</h6>
                        <h6 class="title">${email}</h6>
                        <h6 class="title">${phone}</h6>
                        <h6 class="title">${company}</h6>
                        <h6 class="industry-type title ${cls}">${industry}</h6>
                    </div>
                </div>
            </div>`;
  }).join("");
  $('#user-grid').append(userCard)
});

var $industryType = $('.industry-type');

$industryType.each(function() {
  var $this = jQuery(this);
  let industry = $this.text().trim();
  if (industry in industry_class) {
    $this.addClass(industry_class[industry]);
  }

});
.health-badge {
  background-color: purple;
  color: green;
  height: 80px;
  width: 80px;
}

.science-badge {
  background-color: black;
  color: yellow;
  height: 80px;
  width: 80px;
}

.construction-badge {
  background-color: blue;
  color: white;
  height: 80px;
  width: 80px;
}

.education-badge {
  background-color: orangered;
  color: black;
  height: 80px;
  width: 80px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<body>

  <!-- USER GRID -->
  <div id="user-grid" class="row container fluid-container"></div>

</body>
Barmar
  • 741,623
  • 53
  • 500
  • 612