Небольшая помощь с массивами Javascript

У меня небольшие проблемы с API-массивами. В основном я хочу отображать только первый объект информации из массива API. Я играл с функциями Slice() и substr() и не смог заставить его работать. Я сделал скрипку, чтобы показать, что вы хотите, я имею в виду.

HTML:

<h3>Wind Speed:</h3><div class='speed'></div> <br>
<h3>Wind Direction:</h3><div class='thug'></div><br>
<h3>Wave Height:</h3><div class='test'></div><br>
<h3>Ignore:</h3><div class='wave'></div><br>

JS:

var url = 'http://magicseaweed.com/api/CP86f5quQqmB1fpW2S3bZVUCS8j1WpUF/forecast/?spot_id=1323'

$.ajax({
    dataType: "jsonp",
    url: url
}).done(function(data) {
    console.log(data);
    sum = 0;

   //---Wind Speed---------------------------------- 
     $.each(data, function(){
        sum += this.wind.speed;
    });
    $('.speed').html(sum / data.length + data[0].wind.unit);



     //---Ignore---------------------------------- 
     $.each(data, function(){
        sum += this.swell.maxBreakingHeight;
    });
    $('.wave').html(sum);


     //---Wave Height---------------------------------- 

    $.each(data, function(){
        $('.test').append('<p>' + this.swell.maxBreakingHeight + '</p>'); 
    });


     //---Wind Direction---------------------------------- 

    $.each(data, function(){
        sum += this.wind.compassDirection ;
    });

    var numbers = sum;
     $('.thug').append('<p>' + numbers.slice( 3,4) + '</p>');
});

В этом примере я хочу, чтобы он отображал первое число, которое в этом случае равно "4". Я был бы очень признателен, если бы кто-то мог мне помочь, я довольно новичок в Javascript, и я долго целует голову!

благодаря