Generate an array by combining data from various JSON files

Question

Generate an array by combining data from various JSON files

Greetings, I have an array containing various cities:

var cityArr = ["London", "Beijing", "Paris", "New York", "Seoul", "HongKong"];

My goal is to iterate through each city and retrieve JSON data using AngularJS and JavaScript. Here's the code snippet:

for (i=0; i<cityArr.length; i++){

    $scope.$watch('fondCity', function () {
        cityService.city = $scope.foundCity;
    });
    var newUrl = "http://api.waqi.info/feed/" + cityArr[i] + "/?token=5336bd836b9ec064f6c6fe0bf7e2781838c15c87";
        $http({
            method: "GET",
            url: newUrl
        }).then(function mySucces(response) {
            $scope.newData = response.data;

        }, function myError(response) {
            $scope.newData = response.statusText;
        });
    }

Now, the question arises: How can I merge all these JSON files into a single array?

Here's an example of a single JSON file:

{
  "status": "ok",
  "data": {
    "aqi": 49,
    "idx": 5724,
    "attributions": [
      {
        "url": "http://uk-air.defra.gov.uk/",
        "name": "UK-AIR, air quality information resource - Defra, UK"
      },
      {
        "url": "http://londonair.org.uk/",
        "name": "London Air Quality Network - Environmental Research Group, King's College London"
      }
    ],
    "city": {
      "geo": [
        51.5073509,
        -0.1277583
      ],
      "name": "London",
      "url": "http://aqicn.org/city/london/"
    }
}

I envision the final merged array looking something like this:

{
  "status": "ok",
  "data": {
    "aqi": 49,
    "idx": 5724,
    "attributions": [
      {
        "url": "http://uk-air.defra.gov.uk/",
        "name": "UK-AIR, air quality information resource - Defra, UK"
      },
      {
        "url": "http://londonair.org.uk/",
        "name": "London Air Quality Network - Environmental Research Group, King's College London"
      }
  "status": "ok",
  "data": {
    "aqi": 155,
    "idx": 1451,
    "attributions": [
      {
        "url": "http://www.bjmemc.com.cn/",
        "name": "Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心)"
      },
      {
        "url": "http://beijing.usembassy-china.org.cn/070109air.html",
        "name": "U.S Embassy Beijing Air Quality Monitor (美国驻北京大使馆空气质量监测)"
      }
    ]
{
  "status": "ok",
  "data": {
    "aqi": 28,
    "idx": 5722,
    "attributions": [
      {
        "url": "http://www.airparif.asso.fr/",
        "name": "AirParif - Association de surveillance de la qualité de l'air en Île-de-France"
      }
    ]

javascript angularjs arrays json

Answer 1

Answer №1

To consolidate all responses with identical attributes, your best option is to compile them into an array.

Utilizing $q allows you to synchronize the promises of $http and combine them using the map function.

var promises = cityArr.map(function(name) {
    return $http.get("http://api.waqi.info/feed/" + name + "/?token=5336bd836b9ec064f6c6fe0bf7e2781838c15c87");
});  // Generate an array of Promises for each City Name.

// Wait for all Promises to resolve.
$q.all(promises).then(function(data) {
    // Extract the data attribute from each response and compile it into an array.
    var results = data.map(function(result) {
        return result.data;
    });

    console.log(results);
});

Make sure to include $q as a dependency in your controller or component.

An example has been set up on JSBin: http://jsbin.com/gukusot/edit?js,console

Answer 2

To consolidate all responses with identical attributes, your best option is to compile them into an array.

Utilizing $q allows you to synchronize the promises of $http and combine them using the map function.

var promises = cityArr.map(function(name) {
    return $http.get("http://api.waqi.info/feed/" + name + "/?token=5336bd836b9ec064f6c6fe0bf7e2781838c15c87");
});  // Generate an array of Promises for each City Name.

// Wait for all Promises to resolve.
$q.all(promises).then(function(data) {
    // Extract the data attribute from each response and compile it into an array.
    var results = data.map(function(result) {
        return result.data;
    });

    console.log(results);
});

Make sure to include $q as a dependency in your controller or component.

An example has been set up on JSBin: http://jsbin.com/gukusot/edit?js,console

Answer 3

Answer №2

When working with JSON data, it is important to avoid duplicated key definitions.

{
    "status": "ok",
    "status": "not ok"
}

This practice should be avoided as it can lead to confusion.

To organize your JSON replies effectively, each reply should be wrapped in an object and then concatenated into a single array.


    var myApp = angular.module('myApp',[]);

    function MyCtrl($scope, $http) {
    var cityArr = ["London", "Beijing", "Paris", "New York", "Seoul", "HongKong"];
    $scope.newData = {};

    angular.forEach(cityArr, function(value) {
    var newUrl = "http://api.waqi.info/feed/" + value + "/?token=5336bd836b9ec064f6c6fe0bf7e2781838c15c87";
        $http({
            method: "GET",
            url: newUrl
        }).then(function mySucces(response) {
            $scope.newData[value] = response.data;
            console.log($scope.newData);
        }, function myError(response) {
            $scope.newData[value] = response.statusText;
        });
    });
}

The desired result should look like this:


    [
    "London": {"status": "ok", ...},
    "Beijing": {"status": ... , ... },
    ...
    ]

Some additional notes:

Avoid polluting the global scope by using the var keyword for loop variables.
Consider using built-in functions like angular.forEach to iterate over arrays efficiently.

Answer 4

When working with JSON data, it is important to avoid duplicated key definitions.

{
    "status": "ok",
    "status": "not ok"
}

This practice should be avoided as it can lead to confusion.

To organize your JSON replies effectively, each reply should be wrapped in an object and then concatenated into a single array.


    var myApp = angular.module('myApp',[]);

    function MyCtrl($scope, $http) {
    var cityArr = ["London", "Beijing", "Paris", "New York", "Seoul", "HongKong"];
    $scope.newData = {};

    angular.forEach(cityArr, function(value) {
    var newUrl = "http://api.waqi.info/feed/" + value + "/?token=5336bd836b9ec064f6c6fe0bf7e2781838c15c87";
        $http({
            method: "GET",
            url: newUrl
        }).then(function mySucces(response) {
            $scope.newData[value] = response.data;
            console.log($scope.newData);
        }, function myError(response) {
            $scope.newData[value] = response.statusText;
        });
    });
}

The desired result should look like this:


    [
    "London": {"status": "ok", ...},
    "Beijing": {"status": ... , ... },
    ...
    ]

Some additional notes:

Avoid polluting the global scope by using the var keyword for loop variables.
Consider using built-in functions like angular.forEach to iterate over arrays efficiently.

Generate an array by combining data from various JSON files

Answer №1

Answer №2

Similar questions

Exploring the differences between scoping with let and without any scoping in

What is the best way to incorporate multiple functions into a single ng-change event in Angular

Error: JSON expected a 'STRING' value but received something else

What is the best way to retrieve the duration of an object tag using JavaScript or jQuery?

Managing the triggering of the automatic transition in view models

What is the significance of using pure reducers in the context of Redux?

Preventing a hyperlink from following its destination path

Using React.js to select and change the color of an element

The dual roles of Rust in managing JSON serialization duties

Using AJAX requests and $watch in AngularJS purposes

What are the differences between jQuery, jQuery Mobile, and jQuery UI?

When anchor is set programmatically, the focus outline is not displayed

Leveraging viewbag information in combination with jQuery JSON techniques

JavaScript Array Elements Divided into Separate Arrays

What is the best way to manage a vuex dispatch response?

Server with minimal setup requirements

Assess the HTML containing v-html injection

The filter function in Material UI data grid does not seem to be functioning properly when using the renderCell method

jQuery form isn't submitting

Load website once AJAX has finished