i have an array of objects but how do i display them individually

What you are going to need to do is put the id in the OL object.
Then write a loop to parse through the object. In this example I have pulled out the localstorage values and put them in the clients variable. You can copy and paste this into an html page to see it run.

<ol id="listofusersusingindex">
</ol>
<ol id="listofusersusingin">
</ol>
    <script>
    var clients = [{
      "firstname": "lily",
      "lastname": "ong",
      "NRIC": "S1234567Z",
      "DOB": "2018-07-30",
      "owncontact": "12345678",
      "homecontact": "12345678",
      "email": "[email protected]",
      "blk": "123",
      "street": "12345",
      "houseno": "123",
      "postalcode": "123456",
      "preferredevent": "wcp"
    }, {
      "firstname": "Mickey",
      "lastname": "Mouse",
      "NRIC": "S1234567Z",
      "DOB": "2018-08-29",
      "owncontact": "12345678",
      "homecontact": "12345678",
      "email": "[email protected]",
      "blk": "123",
      "street": "12345",
      "houseno": "123",
      "postalcode": "123456",
      "preferredevent": "cb"
    }];

For training I have included two ways of being able to get the data through JavaScript and into HTML.

First you will notice that you have to get the html element. Lets do this with JavaScript. Second the loop needs to know the number of elements do that with getting the length. Then loop through the object referencing its properties and append ( += ) into the HTML object.

    var listofusersusingindex = document.getElementById("listofusersusingindex");
    var count = clients.length;
    for(var i = 0; i < count; i++)
    {
        listofusersusingindex.innerHTML += "<li>" + clients[i].firstname + " " + clients[i].lastname + "</li>";
    }

    var listofusersusingin = document.getElementById("listofusersusingin");
    for(var item in clients)
    {
        listofusersusingin.innerHTML += "<li>" + clients[item].firstname + " " + clients[item].lastname + "</li>";
    }

    </script>