How to dynamically style data from a JSON input via div.innerHTML?

Question

I'm currently using JS to fetch data from a JSON file and loop through it to display on the site, appending to a div in the html file i.e.

<div id = "groceries"></div>

JS code (skipping fetch code which works fine):

function appendData (data) {
            const mainContainer = document.getElementById ('groceries');
            for (let i = 0; i < data.length; i++) {
                const div = document.createElement ('div');
                div.innerHTML = '<b>' + data[i].item + '</b> x' + data[i].quantity + ' ' + data[i].calories + '<b> - ' + data[i].rating + '<br><br>';
                mainContainer.appendChild (div);
            }
    }

The 'rating' data needs to be styled depending on what the rating is, i.e. green for 'Low', amber for 'Medium', red for 'High'...based on what's in the JSON file.

I'm not sure how to do this with pure JS / html / css however? I've tried searching around but it's surprisingly difficult to find a suitable answer.

Wrap it into a `span` or something, and add a class to that element, based on your rating value. Then write rules in your stylesheet, that applied the different desired styling for those classes. — CBroe, Jun 29 '21 at 09:24
For the future, please use a `[<>]` stack snippet and post the object and JS in a [mcve] - Here the fetch likely works, so no need to post that part at all — mplungjan, Jun 29 '21 at 09:42
Ah yes apologies, will do so in the future. Thanks for the heads up. — Ravarro, Jun 29 '21 at 10:48

score 1 · Answer 1 · answered Jun 29 '21 at 09:37

Add a class based on the rating value. Aka

function appendData(data) {
    const mainContainer = document.getElementById ('groceries');
    for (let i = 0; i < data.length; i++) {
        const div = document.createElement ('div');
        div.classList.add('rating', 'rating--' + (data.rating < 3 ? 'low' : data.rating > 6 ? 'high' : 'med'));
        div.innerHTML = '<b>' + data[i].item + '</b> x' + data[i].quantity + ' ' + data[i].calories + '<b> - ' + data[i].rating + '<br><br>';
            mainContainer.appendChild (div);
    }
}

Then in CSS you can simply do

.rating {
    // Generic styling
}

.rating.rating--low {
    color: #FF0000;
    // Unique Styles
}

.rating.rating--med {
    color: #FFFF00;
    // Unique Styles
}

.rating.rating--high {
    color: #00FF00;
    // Unique Styles
}

score 0 · Answer 2 · answered Jun 29 '21 at 09:29

0

I don't know if I get it right, but you can use simple if statement with prebuilded HTML DOM style object.

if(data[i].quantity > average){
 div.style.color = "red"
}else if(data[i].quantity < average){
 div.style.color = "green"
}

Hope I have helped.

answered Jun 29 '21 at 09:29

Atzuki

627
1
5
16

Try to avoid JS based CSS styling where you can, you limit yourself from reusing code & future edits will be harder to action the more spread about your logic is. – LoveDev Jun 29 '21 at 09:40

score 0 · Answer 3 · answered Jun 29 '21 at 09:44

0

Inside for loop, make a condition check to add a preferred text color,

If (data[i].rating === "High") 
  {div.style.color = "red"}
 // and so on other conditions checked.
If (???) {...}

This example will make all text in div to be red.

If only rating portion to be color, maybe create p and multiple span(s). Then style each of them as preferred. ie. <p style?><span style?><span style?><span style?>

answered Jun 29 '21 at 09:44

Chaiya Tantisukarom

41
1
5

What language is this? Looks like pseudocode – mplungjan Jun 29 '21 at 09:56

How to dynamically style data from a JSON input via div.innerHTML?

3 Answers3