Question: I have been asked from my professor to add an object in the middle of an `ArrayedList<Employee>` using listiterator.

I have tried doing in the following way first:

```
ListIterator < Employee > li = emps.listIterator(emps.size());

System.out.println("\nUsing ListIterator:\n");

i = 1;
while (li.hasPrevious()) {
    if (li.nextIndex() == 5) {
        li.add(emp_M);
    }

    System.out.println("  Employee " + (i++) + " " + li.previous());
}

```

But this produces a seemingly infinite number of iterations where `li.nextIndex()` gets stuck on 5.
I have verified this with the debugger and this happens only after `li.add(emp_M)` is evaluated.

I have found a solution where I added a `break` right after `li.add(emp_M)` and continued parsing the list separately in the same way but without adding to the list `emp_M` at all:

```
//parse in two loops to add the middle employee, without the break the list seemingly spirals into infinity!
System.out.println("\nUsing ListIterator:\n");
i = 1;
while (li.hasPrevious()) {
    if (li.nextIndex() == 5) {
        li.add(emp_M);
        System.out.println("ADDED IN MIDDLE");
        break;
    }
    System.out.println("  Employee " + (i++) + " " + li.previous());
}

while (li.hasPrevious()) {
    System.out.println("  Employee " + (i++) + " " + li.previous());
}

```

This left me wondering, is what I did a lazy and naive approach? How else can I add to a list with `listIterator`?

Answer: 
Assuming you have your HTML table defined without any explicit rows, something like this...

```html
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>

```

...then your DataTable options need to be configured like the following:

```js

  var BillingDate = [ {...}, {...}, ..., {...} ];

  $(document).ready(function() {

    var table = $('#example').DataTable( {
      data: BillingDate,
      columns: [
        { "title": "branchcode",
          "data": "branchcode" },
        { "title": "year",
          "data": "saleyear" },
        { "title": "period",
          "data": "saleprd" },
        { "title": "LastX", 
          "data": "LastX" },
        { "title": "LastY",
          "data": "LastY" },
        { "title": "flag",
          "data": "flag" }
      ]
    } );

  } );

```

Things to note:

1. Because your JSON data array is in a variable called `BillingDate`, this is the name you need to use in your data table:

```
data: BillingDate

```

This tells DataTables where to start, when iterating over the array of row data.

2. Then, you can declare your columns one-by-one - by providing a column heading using `title`, and a datasource using `data`. Each `data` value must exactly match a name used in your JSON objects (one object per row).
Just put your data set in an array rather than object:

```
    var dataSet = [
  ["668","99","3","36.649717","52.488193","1"],
  ["668","99","3","36.649717","52.488193","1"],
  ["668","99","3","36.649717","52.488193","1"],
  ["668","99","3","36.649717","52.488193","1"]
];

```

[Codepen example](https://codepen.io/oda79/pen/MWeRJaM)