Combining two JSON datasets and presenting the merged information

I need help parsing two sets of json data from the following URLs: https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json https://raw.githubusercontent.com/openfootball/football.json/master/2016-17/en.1.json

My goal is to display this data in an angularjs view using a table format by fetching it through an HTTP service. I am familiar with displaying data from a single URL, but unsure how to handle multiple URLs and display the data together. I've heard about using $q for this, but I'm not sure how to implement it. Can someone please provide guidance? Below is a solution for retrieving data from a single URL.

this.baseUrl = 'some url';
this.loadAllBlogs = function() {

  $http({
    method: 'GET',
    url: main.baseUrl + '/all'
  }).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    console.log(response);
    main.blogs = response.data.data;
    console.log(main.blogs);

  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    alert("some error occurred. Check the console.");
    console.log(response);

  });


}

Any suggestions on how to handle two URLs simultaneously?

Answer №1

To efficiently handle multiple requests in AngularJS, use the $q.all() function by passing an array of request promises.

When using $q.all().then(), the resulting data array will be in the same order as the requests were made in the initial array.

  var urls = ['https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json',
    'https://raw.githubusercontent.com/openfootball/football.json/master/2016-17/en.1.json'
  ];

  // Map the array of `$http` promises
  let requests = urls.map((url) => $http.get(url).then((resp) => resp.data));

  $q.all(requests).then((dataArr) => {
      console.log(dataArr);// Data will be in same order as URLs
  }).catch((err)=>{
      console.log('Something went wrong with the requests');
      console.log(err);
  });

Check out the DEMO here

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

What is the purpose of a form that includes a text input field and a button that triggers a JavaScript function when the enter key is pressed?

<form action=""> <input id="user_input" onKeyDown="if(event.keyCode == 13)document.getElementById('okButton').click()" > <input id="okButton" type="button" onclick="JS_function();" value="OK"> </form> I'm trying to a ...

if a condition is not being properly assessed

Currently, I am working on a $.ajax call to retrieve data in JSON format. Within this JSON data, there is an element called "status." My code snippet checks if the value of `data.status` is equal to "success" and performs some actions accordingly. Despite ...

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

Which specific event in NextJS is triggered only during the initial load?

I am working on a NextJS app and I want to implement an initial loading screen that only appears during the first load. Currently, the loading screen pops up not only on the initial load but also whenever a link is clicked that directs the user back to the ...

Electron JS-powered app launcher for seamless application launching

Currently, I am working on a project to develop an application launcher using HTML, CSS, and JS with Electron JS. Each application is linked through an a href tag that directs users to the respective application path. If a normal link is used in the a hr ...

Tips for assigning a standard or custom value using JavaScript

What is the best way to automatically assign a value of 0 to my input field when the user leaves it blank? Should I use an if statement { } else { } ...

Is an XMLHttpRequest necessary for updating a JSON file value using JavaScript?

Currently, I am working on a game feature that allows users to change their display name and then save it in a JSON file for easy access across different files and pages. I initially included an XMLHttpRequest in my code, but after stumbling upon this insi ...

An unusual combination of '||' and '&&' occurred while utilizing babel

I've encountered an issue while building and publishing a package on npm with babel. The build process is showing me the following warning: Line 1: 'use strict' is unnecessary inside of modules strict Line 23: Unexpected mix of '| ...

what is the reason behind Jackson's decision to only convert DateTime (using the joda time library

I've been trying to format DateTime joda using Jackson lib to dd-MM-yyyy'T'HH:mm:ss, but I'm facing issues. I have searched for solutions on various platforms, including stackoverflow.com. Despite trying several suggested answers, the p ...

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...

Uncertain entities in Typescript

I used to use Flow for typing. How can I type an imprecise object? Here's the array I'm working with: const arr = [ {label: 'Set', value: setNumber, id: 'setNumber', set: setSetNumber, type: 'text'}, ...

Troubleshooting IE Freezing Issue Due to JavaScript Code with .addClass and .removeClass

Need some help troubleshooting why my code is causing IE to crash. After commenting out sections, I discovered that the issue arises when using .addClass and/or .removeClass inside the if conditions: if ( percentExpenses > 50 && percentExpenses ...

when the submit button is clicked, verify whether the input field is empty

I have exhausted all my options and nothing seems to work. All I want is for the following functionality to be implemented: When a submit button is clicked -> check if a text field is empty -> if it is, display an error alert and prevent advancing t ...

The THREE.js WebGLRenderer canvas captures the 'click' mouse event

After including the domElement (canvas) from THREE.js WebGLRenderer in my document, I noticed that the 'click' mouse event no longer triggers when clicking on the container element containing the canvas. Is there a method to prevent the canvas f ...

Guide to setting up parameterized routes in GatsbyJS

I am looking to implement a route in my Gatsby-generated website that uses a slug as a parameter. Specifically, I have a collection of projects located at the route /projects/<slug>. Typically, when using React Router, I would define a route like t ...

Utilizing JQuery for asynchronous calls with Ajax

I recently started working with ajax calls using jquery and I'm facing an issue while trying to bind values from the Database. The data is returned in a dataset from the Data Access Layer, and I am attempting to bind this dataset to a gridview on my . ...

Tips for accessing the URL in PhoneGap and parsing the response with jQuery

Currently, I am working on a task in PhoneGap which involves creating a registration page. When the user clicks on the registration page, the values entered will be sent to a specific URL. If the user is already registered or not, the data will be returned ...

Connects URLs to the displayed outcomes in jQuery Auto-suggest Interface

This particular code snippet has been modified from a tutorial on jQuery autocomplete <!doctype html> <html lang="en> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

data being returned twice onpopstate

After experimenting with onpopstate, I encountered an issue. When I click the back button in my browser, the URL changes as expected, but the page code loads twice, resulting in duplicate lists and div elements. Why is this happening and how can it be reso ...

The contents of Ionic views are not stored in a cache, so the controller must

In my ionic application, I have several views. When I launch the app, it takes me to the main view where data is loaded upon initialization of the controller. The issue arises when I navigate away from this view using tabs; sometimes the controller gets d ...