Call out Data from a JSON array using Ajax
<p>I have been trying to spit out some specific data from a JSON array using Ajax but this has been abortive, I was successful with single entry but now i need to iterate through the loops finding it slightly clumsy. I have a JSON file called result.json and needs to call some data from the JSON file</p>

<pre><code>{
    "status": "true",
    "Content-Range": {
        "ResultsRange": [{
            "first": "1",
            "last": "2",
            "max": "2"
        }]
    },
    "data": {
        "Results": [{
            "SeriesID": "1",
            "EventNumber": "1",
            "RunId": "189",
            "FinishPosition": "184",
            "GenderPosition": "163",
            "EventDate": "2008-03-29",
            "AthleteID": "600",
            "RunTime": "00:24:39",
            "PB": "0",
            "Points": "88",
            "AgeGrading": "0.523326572008114",
            "AgeCategory": "SM25-29",
            "FirstTimer": "0",
            "GenuinePB": "0",
            "Updated": "0000-00-00 00:00:00",
            "HandicapRunTime": null,
            "Assisted": null
        }, {
            "SeriesID": "1",
            "EventNumber": "1",
            "RunId": "62",
            "FinishPosition": "32",
            "GenderPosition": "29",
            "EventDate": "2005-12-03",
            "AthleteID": "600",
            "RunTime": "00:21:10",
            "PB": "1",
            "Points": "222",
            "AgeGrading": "0.609448818897638",
            "AgeCategory": "SM25-29",
            "FirstTimer": "1",
            "GenuinePB": "0",
            "Updated": "0000-00-00 00:00:00",
            "HandicapRunTime": null,
            "Assisted": null
        }]
    },
    "links": [{
        "rel": "self",
        "href": "\"/v1/results?athleteId=600&amp;offset=0&amp;limit=100\""
    }, {
        "rel": "first",
        "href": "\"/v1/results?athleteId=600&amp;offset=0&amp;limit=100\""
    }, {
        "rel": "last",
        "href": "\"/v1/results?athleteId=600&amp;offset=0&amp;limit=100\""
    }],
    "timestamp": 1456572472,
    "originalQryTime": 1456572472
}    
</code></pre>

<p>The ajax call is below</p>

<pre><code>$(document).ready(function() {
    $('#result').click(function() {
        $(this).addClass("disabled");
        $.ajax({
            url: "result.json",
            type: "GET",
            dataType: 'json',
            success: function(result) {
                for (var i = 0; i &lt; data[Results].length; i++) {
                    returnData += '&lt;div style="border:2px solid black; margin-top:45px;"&gt;' + '&lt;label&gt;' + 'Events Name: ' + '&lt;/label&gt;' + '&amp;nbsp;&amp;nbsp;' + data[Results][i]["EventNumber"] + '&lt;br&gt;&lt;br&gt;' + '&lt;/div&gt;'
                }
                $("div#athlete-results").html(returnData);
            }
        });
    });
});
</code></pre>

<p>HTML Markup is below</p>

<pre><code>&lt;body&gt; 
   &lt;div class="container" id="athlete-results"&gt; 

   &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Can anybody help me out to iterate correctly over the loop ant spit out some needed data like EventNumber, RunId, FinishPosition and so on for each results</p>