JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>

  <div id="container">
    <ul id="henkilolista"></ul>
  </div>

CSS

ul{
  list-style-type:none;
}

JavaScript

const taulukko = [{
    nimi: 'Juhani',
    lelut: [
        {
            tyyppi: 'lego',
            ostettu: [
                {
                pvm: '12.3.2017'
                },
                {
                pvm: '12.4.2017'
                }
            ]
        },
        {
            tyyppi: 'lumilapio',
            ostettu: [
                {
                    pvm: '17.6.2016'
                },
                {
                    pvm: '18.7.2017'
                }
            ]
        }
    ]
},{
    nimi: 'Paavo',
    lelut: [
        {
            tyyppi: 'jousipyssy',
            ostettu: [
                {
                pvm: '12.3.2017'
                },
                {
                pvm: '12.4.2017'
                }
            ]
        },
        {
            tyyppi: 'marmorikuula',
            ostettu: [
                {
                    pvm: '17.6.2016'
                },
                {
                    pvm: '18.7.2017'
                }
            ]
        }
    ]
}];


$(document).ready(function() {
  //loopataan läpi kaikki henkilöt
  taulukko.map(el => {	
  	$("#henkilolista").append("<li>");
    $("#henkilolista").append("<h2>" + el.nimi + "</h2>");
    $("#henkilolista").append("<h3>Lelut:</h2>");
    $("#henkilolista").append("<ul>");
    //Loopataan läpi henkilön eri lelutyypit
    el.lelut.map(lelu => {
    	$("#henkilolista").append("<li>");
      $("#henkilolista").append("<h4><b>Tyyppi: " + lelu.tyyppi + "</b></h4>");
      $("#henkilolista").append("<span>ostettu:</span>");
      $("#henkilolista").append("<ul>");
      	//loopataan läpi henkilön lelutyyppien ostopäivämäärät
      	lelu.ostettu.map(ostopaiva => {
        	 $("#henkilolista").append("<li><span>" + ostopaiva.pvm + "</span></li>")
        });
      $("#henkilolista").append("</ul></li>");
    });
    $("#henkilolista").append("</ul>");
    $("#henkilolista").append("</li>");
  })
});