JSFiddle - React, Tailwind, and code Playground

by Pris Wiz

HTML

<ul>
   <li id="names">Employee Names</li>
</ul>
<ul>
   <li id="other">Other Names</li>
</ul>

CSS

li {
    list-style: none;
}

JavaScript

 var btsFrontEnd = {
         "employee-1": {
             "name": "Jose Ramon", 
             "phone": "1234567890",
             "email": "[email protected]"
            },
         
        "employee-2": {
                      "name": "Volmar Machado", 
                      "phone": "1234567890",
                      "email": "blah@blah." 
         }
};


var btsemployees = {
    employees:[
		{
         "name": "Jose Ramon", 
         "phone": "1234567890",
         "email": "[email protected]"
		},
         { 
         "name": "Volmar Machado", 
          "phone": "1234567890",
         "email": "[email protected]"
},
         { 
         "name": "EL Luar", 
          "phone": "1234567890",
         "email": "[email protected]"
},
         { 
         "name": "Miguel Gocobachi", 
          "phone": "1234567890",
         "email": "[email protected]"
}
]
};


//First argument is our data structure (an object or an array
//Second argument is a callback (logic we apply to our data structure)
$.each(btsemployees, function (key, value) { //first is the key or index, second argument is the value
   
    console.log(btsemployees[key]); //Makes reference to working object element by key (like in an array)
    console.log(value.email); //Prints Ramon and Volmar
});

//my code to change Htmk elements to show front end employees
var names = document.getElementById( "names" );
names.innerHTML = " ";

$.each( btsFrontEnd, function( key, value ) { 
    names.innerHTML += value.name + "<br>";    
});

var names = document.getElementById( "other" );
other.innerHTML = " ";

$.each( btsemployees.employees, function( key, value ) { 
    other.innerHTML += value.name +"<br>";    
});