Adding Classes to Dynamic JSON Values

Question

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>

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
– Mitya, Commented Feb 12, 2021 at 15:42
You need to execute the $.each() loop after adding the new elements in the callback function. — Barmar
– Barmar, Commented Feb 12, 2021 at 15:44
@Mitya Correct, the classes are not being added, for instance, if you added "education-badge" directly into the inspector here <h6 class="education-badge industry-type title">Education</h6> 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
– Captain Steve, Commented Feb 12, 2021 at 15:48

Barmar · Accepted Answer · 2021-02-12 16:06:52Z

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>

Collectives™ on Stack Overflow

Adding Classes to Dynamic JSON Values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related