JSFiddle - React, Tailwind, and code Playground
HTML
<p id="names">Some Name</p>
CSS
li{
list-style: none;
}
JavaScript
var btsFrontEnd = {
"employee-1": {
"name": "Name One",
"phone": "1234567890",
"email": "[email protected]"
},
"employee-2": {
"name": "Name Two",
"phone": "1234567890",
"email": "blah@blah."
}
};
var btsemployees = {
employees:[
{
"name": "Name One",
"phone": "1234567890",
"email": "[email protected]"
},
{
"name": "Name Two",
"phone": "1234567890",
"email": "[email protected]"
},
{
"name": "Name Three",
"phone": "1234567890",
"email": "[email protected]"
},
{
"name": "Name Four",
"phone": "1234567890",
"email": "[email protected]"
},
{
"name": "Name Five",
"phone": "1234567890",
"email": "[email protected]"
}
]
};
$.each(btsFrontEnd, function (key, value) { //first is the key or index, second argument is the value
console.log(btsFrontEnd[key]); //Makes reference to working object element by key (like in an array)
console.log(value.name); //Prints Name One and Name Two
document.getElementById("names").innerHTML += "<p>" + value.name + "</p>";
document.getElementById("names").innerHTML += "<p>" + value.phone + "</p>";
document.getElementById("names").innerHTML += "<p>" + value.email + "</p>";
});