JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<div class="user"></div>

SCSS

.disb { display: block;}
.disib { display: inline-block;}

.user {
    &_list {
        text-align: center;
        border: 1px solid #000000;
        width: 100px;
        height: 100px;
        &:not(:last-child) {
            margin-right: 10px;
        }
    }
}

JavaScript

var apiData = {
    users: [
        {
            name: 'ユーザーA',
            icon: 'http://placehold.jp/ffa582/ffffff/50x50.png',
            premier: false
        },
        {
            name: 'ユーザーB',
            icon: 'http://placehold.jp/ff4500/ffffff/50x50.png',
            premier: true
        },
        {
            name: 'ユーザーC',
            icon: 'http://placehold.jp/ffd3c2/ffffff/50x50.png',
            premier: false
        }
    ]
};

var usersData = apiData['users'];
var userLabel = '';

$(usersData).each(function(index, value) {
	if (value['premier']) {
  	userLabel = 'premier';
  }
  
    $('.user')
        .append(
        '<div class="user_list disib">' +
        '<span class="disb">' + value['name'] + '</span>' +
        '<span class="disb"><img src="' + value['icon'] + '">' +
        '<span class="disib">' + userLabel +
        '</div>'
    );
})