Struggling with navigating JSON data in JavaScript and facing difficulties sorting the array

I am currently facing the challenge of organizing data obtained from an API using JavaScript.

JavaScript Code to Retrieve Data:

function getResults() {
    var url = $.getJSON("http://api.api.com&leagues=SOCENGPRE&lang=en&format=jsonp&callback=?", function(jsondata){;
        for(var i = 0; i < jsondata.length; i++)
            for(var id in jsondata[i]) {
                console.log("ID - " + id);
                console.log("TEAM - " + jsondata[i][id].home_team);
            }
    });
}

Sample of Retrieved Data :

{
    "SOCENGPRE": {
        "league_name": "Barclays Premier League",
        "league_phid": null,
        "league_type": null,
        "fixtures": [
            {
                "id": "64714",
                "code": "SOCENGPRE",
                "event_slug": "west_ham-tottenham-1401290",
                "home_team": "West Ham",
                "away_team": "Tottenham",
            },
            {
                "id": "64711",
                "code": "SOCENGPRE",
                "event_slug": "manchester_u-sunderland-1401286",
                "home_team": "Manchester U",
                "away_team": "Sunderland"
            }

However, my code seems to be failing to produce the desired results.

My objective is to display the ID and Home Team of every game. Any suggestions on why my code isn't working as expected would be greatly appreciated!

UPDATE: I have removed the extra semi-colon but it's still not printing the data for me. UPDATE 2: Regarding the requests for the URL. When I call it in a browser I receive a large result

?({"SOCENGPRE":{"league_name":"Barclays Premier League","league_phid":null,"league_type":null,"fixtures":[{"id":"64714","code":"SOCENGPRE","event_slug":"west_ham-tottenham-1401290","start":"1399117500","home_team":"West Ham","home_team_phid":null,"home_team_logo":"\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t523.png","home_team_short":"","away_team":"Tottenham","away_team_phid":null,"away_team_logo":"\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t498.png","away_team_short":"","phid":null},{"id":"64711","code":"SOCENGPRE","event_slug":"manchester_u-sunderland-1401286","s...

Link to pastebin for easier reading of the data

javascriptjson

Answer №1

Revise your getResults function so that it executes after the JSON data has been parsed, as shown below:

var myDataVar;
$.ajax({
    url: "Enter URL to JSON file here",
    dataType: "text", //If an error occurs, change the type to "text"
    success: function (data) {
        myDataVar = $.parseJSON(data);
        getResults();
    }
});

The above code will store the parsed data from the JSON file into a single variable.

It will then invoke a function to fetch the results, which is defined as follows:

function getResults() {
        var fixturesLength = myDataVar.SOCENGPRE.fixtures.length - 1;
        for (var i = 0; i <= fixturesLength; i++) {
            console.log(myDataVar.SOCENGPRE.fixtures[i].id);
        }
    }

The loop above will display all fixture IDs in the console.

Sample test data used:

{
    "SOCENGPRE": {
        "league_name": "Barclays Premier League",
        "league_phid": null,
        "league_type": null,
        "fixtures": [{
            "id": "64714",
            "code": "SOCENGPRE",
            "event_slug": "west_ham-tottenham-1401290",
            "start": "1399117500",
            "home_team": "West Ham",
            "home_team_phid": null,
            "home_team_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t523.png",
            "home_team_short": "",
            "away_team": "Tottenham",
            "away_team_phid": null,
            "away_team_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t498.png",
            "away_team_short": "",
            "phid": null
        }, {
            "id": "64711",
            "code": "SOCENGPRE",
            "event_slug": "manchester_u-sunderland-1401286",
            "start": "1399125600",
            "home_team": "Manchester U",
            "home_team_phid": null,
            "home_team_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t20790.png",
            "home_team_short": "Man U",
            "away_team": "Sunderland",
            "away_team_phid": null,
            "away_team_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t382.png",
            "away_team_short": "",
            "phid": null
        }, {
            "id": "64712",
            "code": "SOCENGPRE",
            "event_slug": "stoke-fulham-1401288",
            "start": "1399125600",
            "home_team": "Stoke",
            "home_team_phid": null,
            "home_team_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t389.png",
            "home_team_short": "",
            "away_team": "Fulham",
            "away_team_phid": null,
            "away_team_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t379.png",
            "away_team_short": "",
            "phid": null
        }]
    }
}

Console output:

64714
64711
64712

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A more intelligent approach for generating JSON responses using Mysql

Here is the code I have on my server side using Node.js: var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: 'SOMEUSER', password: 'SOMEPASSWD', database: 'SOMED ...

javascriptmysqljsonnode.js

Accessing JSON data from a URL for use within a specific context

I am currently utilizing the request module within Express to fetch a JSON file from a specified link. var url = 'https://api.github.com/users/google/repos'; request.get({ url: url, json: true, headers: {'User-Agent': &apo ...

javascriptnode.jsexpress

How can progress bars be animated using CSS or JavaScript?

I am currently working on creating a progress bar animation, but I'm unsure whether to use CSS or JS. Can anyone provide insight on how this effect was achieved here? I am hoping to replicate it. Does anyone know if this is the code they used? I&apos ...

javascriptjqueryhtmlcssanimation

Text that appears automatically in an input field

I've searched high and low, but I just can't seem to find a solution that works for me. What I need is a way to automatically populate a HTML text field with default text when the page loads. This default text should ideally be a PHP variable and ...

javascriptphphtmlweb

Update the DOM if the index of any data elements have been modified

Can Vue.js detect the swapping of array elements in my data object? data: { list: [ 'Foo', 'Bar', 'Test' ] } This is the method I am using to swap entries: swapIndex: function(from, to) { var first = this ...

javascriptvue.jsvuejs2

Assign an identifier to the HTML helper Html.EditorFor

When using a textbox created with the HTML helper "@Html.EditorFor", there may be a need to perform some action with JavaScript on its change event. In order to do this, an ID needs to be set for the textbox. For example, if you need to set a string value ...

javascriptjqueryhtml

What is the best way to automatically populate additional autocomplete options after selecting certain data, and include new data if it is not already present?

Is it possible to automatically populate the other Autocomplete fields based on matching first and last names? I am encountering scenarios where multiple individuals share similar first or last names but have different addresses. In addition, I would like ...

javascriptreactjsmaterial-ui

Utilizing JSON parse/stringify for data manipulation

I'm seeking advice on manipulating JSON data using JavaScript, particularly with the stringify/parse methods. In this scenario, I start by creating a JSON string and then use parse to convert it into an object. However, my goal is to efficiently delet ...

javascriptjson

The labels displayed on ChartJs are inaccurate

As a student who has been learning programming for about a month, I must admit that there may be many mistakes in my code. In developing a website, I have incorporated a chart from the ChartJs library. The chart consists of an outer circle representing ho ...

javascripthtmlchartschart.js

Updating the value of an element within a JSON array using Python

After retrieving the following collection from an http request: [{'ParameterKey': 'AdminCCIDRBlock', 'ParameterValue': '10.10.196.0/23'}, {'ParameterKey': 'MyParameter', 'ParameterValue&ap ...

pythonjsonstring

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

On my journey into the world of web development, I am facing a challenge with adding an option to a dropdown list. Despite pressing the add button to insert "Pasta" as a new option, it is not showing up in the list immediately. However, selecting all optio ...

javascriptjquery

Using AngularJS to dynamically update the DOM with the response from a service method

Here's the HTML code: <div ng-controller="AutoDeployController as autoDeploy"> <input type="text" ng-model="autoDeploy.message"> <p>Message: {{ autoDeploy.message }}</p> </div> <button ng-click="autoDeploy.chan ...

javascriptangularjs

Feeling lost on how to implement JSON in C#?

When it comes to using C# with JSON, the common answer is always "use JSON.NET", but that's not the solution I'm searching for. The issue lies in the fact that JSON.NET, based on my research, appears to be just a more efficient version of the Da ...

c#.netjsonserializationdatacontract

Ways to compare and update values in two dictionaries using Python

Here is the original dictionary: [{'ITEMNO': None}, {'ITEM_TYPE': None}, {'CASE_QTY': None}, {'MIN_MINMAX_QUANTITY': None}, {'MAX_MINMAX_QUANTITY': None}, {'ONHAND': None}, {'ONHAND_SUBINV&a ...

pythonjsonpython-3.xlistdictionary

Converting Angular 2/TypeScript classes into JSON format

I am currently working on creating a class that will enable sending a JSON object to a REST API. The JSON object that needs to be sent is as follows: { "libraryName": "temp", "triggerName": "trigger", "currentVersion": "1.3", "createdUser": "xyz", ...

jsonangulartypescript

Steer clear of directly accessing views in AngularJS using angular-ui-router

In my AngularJS App setup, I have the following configuration: angular .module('MyApp') .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvi ...

javascriptangularjs

Leverage a JSON document to deactivate certain dates within the JQuery UI-Datepicker

As a novice apprentice delving into the world of programming, my knowledge of J-Query and JavaScript is limited. Nonetheless, I am embarking on a new project where users will be booking days using a datepicker. My aim is to ensure that all UK Bank Holidays ...

jqueryjsonjquery-ui-datepicker

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

I have an onchange function that triggers when the "pending" option is selected in a select dropdown menu. This function adds a predefined value to an input field. However, I also want this functionality to apply when the page loads. Currently, the "pendin ...

javascripthtml

Animating CSS with jQuery for a background image effect

I have the following JavaScript code : $(".linksColl a li").hover(function () { $(this).css({ "background-image" : "url(images/links/linkHover1.png)", "background-position" : "center center", ...

javascriptjquery

How can I adjust the timeout or enhance my code for Excel Online's ExcelScript error regarding the Range getColumn function timing out?

I am struggling with a code that is supposed to scan through the "hello" sheet and remove any columns where the top cell contains the letter B: function main(workbook: ExcelScript.Workbook) { let ws = workbook.getWorksheet("hello"); let usedrange = ws ...

javascriptexceltypescripttimeoutoffice-scripts