Populate a list of icons and names from a JSON object

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="ag-scopes"></ul>

CSS

body{
  font-family: helvetica;
}

ul.ag-scopes{
  list-style: none;
  margin:0px;
  padding: 0px;
}
ul.ag-scopes>li{
  border: solid 1px #ccc;
  margin-top: 3px;
  padding: 5px;
  font-size: 17px;
}
ul.ag-scopes>ul.vault-tiles {
    display: block;
    position: relative;
    font-family: helvetica;
    list-style: none;
    width: calc(100% - 22px);
    margin: auto;
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #f5f5f5;
    padding-top: 20px;
}
ul.ag-scopes>ul.vault-tiles>li {
    margin: 2px;
    padding: 0px;
    position: relative;
    background-color: #d5d5d5;
    display: inline-block;
    width: calc(25% - 7px);
    cursor: pointer;
    vertical-align: top;
    height: 63px;
}
ul.ag-scopes>li>img{
  height: 32px;
  width: auto;
  vertical-align: middle;
}
ul.ag-scopes>ul{
  list-style: none;
  margin:0px;
  padding: 0px;
}
ul.ag-scopes>ul:empty:before{
  display: block;
  content: "NO RESULTS FOUND";
  text-align: center;
  padding: 30px;
  font-size: 11px;
}

JavaScript

let data = {"scopes":[{"0":"1","id":"1","1":"1","service_id":"1","2":"Life Safety Permit","name":"Life Safety Permit","3":"Permit","shortname":"Permit","4":"Select a permit form","label":"Select a permit form","5":"\/clientPortal\/includes\/allSafe\/forms\/assets\/front-end\/document-green.png","icon_path":"\/clientPortal\/includes\/allSafe\/forms\/assets\/front-end\/document-green.png","6":"\/clientPortal\/assets\/form-chain-icon.svg","package_icon_path":"\/clientPortal\/assets\/form-chain-icon.svg","7":"form","type":"form","8":"all-safe\/life-safety-permits\/","base_url":"all-safe\/life-safety-permits\/","formchains":[{"0":"1838,1648","form_configuration":"1838,1648","1":"0","form_archived":"0","2":"multiple","form_behavior":"multiple","3":"","form_facilities":"","4":"0","form_confidential":"0","5":"My Chain","form_name":"My Chain","6":"160","form_id":"160","forms":[{"0":"1838","id":"1838","1":"Small Images","name":"Small Images","2":"single-submission","behaviour":"single-submission","3":"new-window","openbehaviour":"new-window","4":"0","confidential":"0","5":"","confidential_ids":"","6":"none","confidential_type":"none","7":"0","agGEAR_form":"0","submission_count":1},{"0":"1648","id":"1648","1":"Andy Form","name":"Andy Form","2":"single-submission","behaviour":"single-submission","3":"new-window","openbehaviour":"new-window","4":"0","confidential":"0","5":"","confidential_ids":"","6":"none","confidential_type":"none","7":"0","agGEAR_form":"0","submission_count":23}]}]},{"0":"2","id":"2","1":"1","service_id":"1","2":"Safety Form","name":"Safety Form","3":"Form","shortname":"Form","4":"Select a safety form","label":"Select a safety...