JSFiddle - React, Tailwind, and code Playground

by taylorRichie

HTML

<div id="placeholder"></div>

JavaScript

var data = {
    "strains": [
        {
            "name": "Green One",
            "price": {
                "grams": 10,
                "ounces": 20,
                "eigths": 30,
                "quarters": 40,
                "pounds": 50
            },
            "color": "red"
        },
        {
            "name": "Green Two",
            "price": {
                "grams": 10,
                "ounces": 20,
                "eigths": 30,
                "quarters": 40,
                "pounds": 50
            },
            "color": "blue"
        },
        {
            "name": "Green Three",
            "price": {
                "grams": 10,
                "ounces": 20,
                "eigths": 30,
                "quarters": 40,
                "pounds": 50
            },
            "color": "Green"
        }
    ]
}

var output = "<ul>";
for (var i in data.strains) {
    output += "<li style='color:" + data.strains[i].color + "'>" + data.strains[i].name + " -- " + "$" + data.strains[i].price.grams + " per gram</li>";
}

output += "</ul>";
document.getElementById("placeholder").innerHTML = output;

console.log(output);