JSFiddle - React, Tailwind, and code Playground

HTML

<div id="char">
    <div class="thumb"></div>
    Name: <span id="fname"></span></br>
    Species: <span id="spec"></span></br>
    Occupation: <span id="occu"></span></br>
    Cider: <span id="cid"></span></br>
    Description: <span id="desc"></span></br>
    Bio <span id="bio"></span></br>
    Alliance: <span id="alli"></span><br>
</div>

JavaScript

function byId (id) {
    return document.getElementById(id);
}

var txt = {
    "characters": [
        {
            "fullName": "John Doe",
            "speci": "human male",
            "occup": "Web Personality",
            "cide": "Sleeper",
            "descr": "blah",
            "biog": "blarg",
            "allia": "chaos good"
        },
        {
            "fullName": "Jane Doe",
            "speci": "humanfemale",
            "occup": "MovieProducer",
            "cide": "Citric",
            "descr": "bluh",
            "biog": "blurg",
            "allia": "neutral"
        },
        {
            "fullName": "CanterDoma",
            "speci": "alienmale",
            "occup": "Chef",
            "cide": "Galv",
            "descr": "bleh",
            "biog": "blerg",
            "allia": "evil"
        }
    ]
};

var obj = txt;

byId("fname").innerHTML = obj.characters[1].fullName;
byId("spec").innerHTML = obj.characters[1].speci;
byId("occu").innerHTML = obj.characters[1].occup;
byId("cid").innerHTML = obj.characters[1].cide;
byId("desc").innerHTML = obj.characters[1].descr;
byId("bio").innerHTML = obj.characters[1].biog;
byId("alli").innerHTML = obj.characters[1].allia;