JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<ul id="results"></ul>

CSS

#results {display:none; border:1px solid #777;}
li {padding:5px 8px; color:#333;}
.zebraOdd {background:#f2f2f2;}

JavaScript

var matchedUsers = 
{
    "friendsRequested": {
        "0": {
            "name": "Janet Smith",
            "username": "jsmith",
            "avatar": "/jsmith/avatar/url/whatever.jpg"
        },
        "1": {
            "name": "Bill Johnson",
            "username": "johnno",
            "avatar": "/johnno/avatar/url/whatever.jpg"
        },
        "2": {
            "name": "Suzy McPhearson",
            "username": "phearme",
            "avatar": "/phearme/avatar/url/whatever.jpg"
        },
        "3": {
            "name": "Tamika King",
            "username": "tking",
            "avatar": "/tking/avatar/url/whatever.jpg"
        }
    }
}
;

var friendsAddedHTML = '';
$.each( matchedUsers.friendsRequested, function( i, thisUsr ){
    ( i % 2 == 0 ) ? (friendsAddedHTML += '<li>') : (friendsAddedHTML += '<li class="zebraOdd">');
    friendsAddedHTML += thisUsr.name +" ("+ thisUsr.username +")</li>";
});
$('#results').append( friendsAddedHTML ).fadeIn();