JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="json"></div>

CSS

#json, .person {
	border: 1px solid #e1e1e1;
	margin: 5px;
	padding: 10px;
}

JavaScript

// http://dummi.io/
var data = {
  "dummi-data": [
    {
      "id": 0,
      "fullName": "John Leonard",
      "age": 36,
      "username": "jLeonard"
    },
    {
      "id": 1,
      "fullName": "Emily Powers",
      "age": 44,
      "username": "ePowers"
    },
    {
      "id": 2,
      "fullName": "Mildred Richardson",
      "age": 55,
      "username": "mRichardson"
    },
    {
      "id": 3,
      "fullName": "Jeanette Tyler",
      "age": 59,
      "username": "jTyler"
    },
    {
      "id": 4,
      "fullName": "Ethel Medina",
      "age": 57,
      "username": "eMedina"
    },
    {
      "id": 5,
      "fullName": "Marion Pierce",
      "age": 41,
      "username": "mPierce"
    }
  ]
};

//$.getJSON('myfile.JSON', function(data){

	$.each( data["dummi-data"], function( key, val ){

		$('#json')
			.append('<div class="person id-'+ val.id +'">')
			.find('> div:last')
				.append('<div class="fullName">' + val.fullName + '</option>')
				.append('<div class="age">' + val.age + '</option>')
				.append('<div class="username">' + val.username + '</option>');

	})

//});