JSFiddle - React, Tailwind, and code Playground

by Barry O'Donovan

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<html>
<bod>

  <blockquote>
  <p>
    Example of creating a IXP member list via JavaScript with 
    <a href="https://www.ixpmanager.org">IXP Manager</a>'s 
    <a href="http://docs.ixpmanager.org/features/ixf-export/">IX-F Member Export</a>.
  </p>
  <p>
    By <a href="https://github.com/yannrobin">@yannrobin</a> 
    and <a href="https://github.com/barryo">@barryo</a>.
  </p>
  </blockquote>

     <table class="table table-bordered" style="margin: 10px">
      <thead>
        <tr>
          <th>Company</th>
          <th>ASN</th>
          <th>Connections</th>
        </tr>
      </thead>
      <tbody id="list-members">
          <tr>
              <td colspan="3">Please wait, loading...</td>
          </tr>
      </tbody>
    </table>

</bod>
</html>

JavaScript

// Sample IX-F Member Export to Member List script
//
// License: MIT (https://en.wikipedia.org/wiki/MIT_License)
// By @yannrobin and @barryo
// 2018-03-06

function prettySpeeds( s ) {
		switch( s ) {
    		case 10:     return "10Mb";
    		case 100:    return "100Mb";
    		case 1000:   return "1Gb";
    		case 10000:  return "10Gb";
    		case 40000:  return "40Gb";
    		case 100000: return "100Gb";
        default:     return s;
    }
}

$.getJSON( "https://www.inex.ie/ixp/api/v4/member-export/ixf/0.7", function( json ) {

	  // sort by name
    json[ 'member_list' ].sort( function(a, b) {
        var nameA = a.name.toUpperCase(); // ignore upper and lowercase
        var nameB = b.name.toUpperCase(); // ignore upper and lowercase
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        // names must be equal
        return 0;
    });

    let html = '';
    
    $.each( json[ 'member_list' ], function(i, member) {
        html += `<tr>
        						 <td>
                         <a target="_blank" href="${member.url}">${member.name}</a>
                     </td>
                     <td>
                         <a target="_blank" 
                             href="http://www.ripe.net/perl/whois?searchtext=${member.asnum}&form_type=simple">
                             ${member.asnum}
                         </a>
                     </td>`;

        let connection = '';
        $.each( member[ 'connection_list' ], function(i, conn ) {
            if( conn[ 'if_list' ].length > 1 ){
            	  connection += conn[ 'if_list' ].length+ '*'
            }
            connection += prettySpeeds( conn[ 'if_list' ][0].if_speed );
            
            if(i < (member[ 'connection_list' ].length - 1 )){
              connection += " + ";
            }
        });
        
        html += `<td>${connection}</td></tr>\n`;
    });

    $( "#list-members" ).html(html);
});