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":human female",occup":"Movie Producer","cide":"Citric","descr":"bluh","biog":"blurg","allia":"neutral" },' +
'{"fullName":"Canter Doma","speci":alien male",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;