My task is to take the 3 different color lists in the jsonObj and place them into a `<ul>`. They should only appear one at a time, every second. For the sake of the fiddle, I put it to every 5 seconds.

I haven't gotten to the 2nd or 3rd list of colors yet because while I can list out my 1st color list, they're appending outside of the listItem I've created for them. The code it spits it is:

```js
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,
  i = 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) {
      i = 0;
    }

  });

}, 5 * 1000);

timer;
```

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

Also available at <https://jsfiddle.net/ep76ba3u/>

What it does:

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

```

What it should look like:

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

```

I've tried rearranging it all. I've tried using wrap, innerWrap. I've tried just using text() and a few other methods. I started working on it at 3am and its 5am now... brain is fried. Any idea how to get this moving is appreciated.