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": "Movie Producer",            "cide": "Citric",            "descr": "bluh",            "biog": "blurg",            "allia": "neutral"        },        {            "fullName": "Canter Doma",            "speci": "alienmale",            "occup": "Chef",            "cide": "Galv",            "descr": "bleh",            "biog": "blerg",            "allia": "evil"        }    ]}';

var obj = eval ("(" + 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;