How to create dynamic variable and assign data

Question

I have a small app where i add city and country to the list and request weather for individual city using http request.

Whats the problem : When i have more than one cities in the list, and i request weather of perticular city, it updates weather for all the cities in the list;

What i want ? : I want to create a dynamic variable or array index where i can store and display weather info of individual city with its name as index. I am open to other solutions apart from dynamic variable or array index.

Is there a plnkr? : Here is the link to plunkr. Add 2 entries to reproduce the issue 1) pune, india 2) mumbai, india

What i tried : I tried to convert "destination" variable to string which is a function parameter to string using $parse and $scope.$eval() but that didnt worked.

Here is my getWeather function

$scope.getWeather = function(destination){

    $http.get(destination+".json").then(
        function successCallback (response){
            if(response.data){
                $scope.dest = {};
                $scope.dest = response.data;                

                // $scope.info[$parse(destination)] = response.data;
                // console.log($scope.info[$parse(destination)]);

            }
        },
        function errorCallback (err){
            alert(err);
        }
    );
}

Hoyen · Accepted Answer · 2017-06-21 19:00:28Z

Each destination object/model should also have it's own weather property. After you get the weather for that destination, you set the weather property to the data.

// Code goes here
var testingAngluarApp = angular.module('myapp', []);

testingAngluarApp.controller('mycontroller', function ($scope, $http) {
    $scope.title = "Testing AngularJS Applications";

    $scope.destinations = [];
    $scope.info = [];
    // Destination Class/Model
    var NewDestination = function(){
      this.city = '';
      this.country = '';
      this.weather = null;
    }
    $scope.newDestination = new NewDestination();
    $scope.addDestination = function(){
        $scope.destinations.push($scope.newDestination);
        $scope.newDestination = new NewDestination();
    };

    $scope.removeDestinations = function($index){
        $scope.destinations.splice($index,1);
    };
    // Pass in the reference to the destination object
    $scope.getWeather = function(destination){
        $http.get(destination.city+".json").then(
            function successCallback (response){
                if(response.data){
                    // Set the detination's weather to the response's data
                    destination.weather = response.data;
                                           
                }
            },
            function errorCallback (err){
                alert(err);
            }
        );
    }
});

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
    <body ng-controller="mycontroller">
        <h3>{{title}}</h3>
        <section>
            <form ng-submit="addDestination()">
                <input type="text" name="city" ng-model="newDestination.city" ng-init="newDestination.city='pune'" value="" />
                <input type="text" name="country" ng-model="newDestination.country"  ng-init="newDestination.country='India'" value="">
                <button type="submin">Add</button>
            </form>
        </section>
        <h4>Your Wishlist</h4>
        <section>
        <!-- Update the template to reference the destination's weather property -->
            <div ng-repeat="destination in destinations">{{ destination.city }}, {{ destination.country }} 
                <span ng-if="destination.weather"> - {{ destination.weather.weather }}, {{ destination.weather.temp }} </span>
                <button ng-click="removeDestinations($index)">Remove</button>
                <!-- Pass the destination object to the getWeather function instead of just the city name-->
                <button ng-click="getWeather(destination)">Weather</button>
            </div>
        </section>
    </body>
</html>

AdamCooper86 · Accepted Answer · 2017-06-21 19:06:09Z

0

So here is an answer:

http://plnkr.co/edit/iL3RRc8NdOS5OSrfyG8o?p=preview

destination.data = response.data

Basically, I think you were making it a bit to complicated with the $scope.dest, or the indexing, etc. Just putting the data on the destination worked for me.

answered Jun 21, 2017 at 19:06

AdamCooper86

4,2371 gold badge15 silver badges20 bronze badges

1 Comment

Amit Patil Over a year ago

It worked, Real problem was that, previously "destination" parameter was holding value "pune" and i was trying to add "destination.data" to it which was wrong, and was throwing error. After reading your answer i realised whats going wrong, "destination" parameter has to be object and not "string". Thanks!

Collectives™ on Stack Overflow

How to create dynamic variable and assign data

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related