javascript - JSON Split - Place array text into li during interval -

my task take 3 different color lists in jsonobj , place them <ul>. should appear 1 @ time, every second. sake of fiddle, put every 5 seconds.

i haven't gotten 2nd or 3rd list of colors yet because while can list out 1st color list, they're appending outside of listitem i've created them. code spits is:

var jsonobj = '{"one":["red","green","blue"], "two":["red","green","blue"], "three":["orange","purple","hotpink"]}',    object = json.parse(jsonobj),    cone = object.one,    ctwo = object.two,    cthree = object.three,    = 0,    timer;    $('body').append('<ul/>');    timer = setinterval(function() {      $.each(cone, function() {      var list = $('body ul'),        listitem = $(list).append('<li>'),        html = $(listitem).append(cone[i]);        if (i < cone.length) {        i++;        $(cone[i]).split("");        list.append(html);        } else if (i = cone.length) {        = 0;      }      });    }, 5 * 1000);    timer;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

also available @ https://jsfiddle.net/ep76ba3u/

what does:

<ul> <li></li> "red" <li></li> "blue" </ul> 

what should like:

<ul> <li>red</li> <li>blue</li> </ul> 

i've tried rearranging all. i've tried using wrap, innerwrap. i've tried using text() , few other methods. started working on @ 3am , 5am now... brain fried. idea how moving appreciated.

i feel compelled put in answer should perform better cache of jquery objects , processes objects , each color in them, hitting dom once each color.

var jsonobj = '{"one":["red","green","blue"], "two":["red","cyan","darkblue"], "three":["orange","purple","hotpink"]}',   objects = json.parse(jsonobj);  // set timer values var basetime = 1000; var delaytime = basetime; // cache ul list var myul = $('<ul/>').appendto('body'); //process outer objects $.each(objects, function(key, item) {   // process color array held in item   $.each(item, function(index, color) {     settimeout(function() {       $('<li/>').text(color).css('color', color).appendto(myul);     }, delaytime);     delaytime = delaytime + basetime;   }); }); 

test out here https://jsfiddle.net/markschultheiss/yb1w3o73/