Load first json object by default - Angular

Question

I'm hoping this is an easy question to answer...

I'm trying to create a table that loads my json, then be able to click a row and load more details that pertain to the json object. When you click a row it should load additional details at the top of the page. The row clicking part is working fine. What I'm having trouble with is loading the initial object by default.

Below is an example of what I'm referring to:

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

myItemsApp.factory('itemsFactory', ['$http', function($http){
    var itemsFactory = {
        itemDetails: function () {
            return $http({
                    url: "fake-phi.json",
                    method: "GET",

            }).then(function (response) {
                return response.data;
            });
        }
    };

    return itemsFactory;

}]);

myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory',         
    function($scope, itemsFactory){
        var promise = itemsFactory.itemDetails();

        promise.then(function (data) {
            $scope.itemDetails = data;
            console.log(data);
        });

        $scope.select = function (item) {
            $scope.selected = item;
        }

}]);

http://embed.plnkr.co/6LfAsaamCPPbe7JNdww1/

I tried adding this after $scope.select, but got an error:

$scope.selected = item[0];

How do I get the first object in my json to load by default?

thanks in advance

Manu Obre · Accepted Answer · 2016-12-16 19:13:47Z

1

Inside your promise resolve function assign the first item of the array, as a selected value:

   promise.then(function (data) {
        $scope.itemDetails = data;
        $scope.selected = data[0];
        console.log(data);
   });

answered Dec 16, 2016 at 19:13

Manu Obre

2,3041 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Sjoblom Over a year ago

Thought I was close! I appreciate your help @ManuelObregozo! thanks

Arun Reghunathan · Accepted Answer · 2016-12-16 19:33:05Z

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

myItemsApp.factory('itemsFactory', ['$http', function($http){
    var itemsFactory = {
        itemDetails: function () {
            return $http({
                    url: "fake-phi.json",
                    method: "GET",

            }).then(function (response) {
                return response.data;
            });
        }
    };

    return itemsFactory;

}]);

myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory',         
    function($scope, itemsFactory){
        var promise = itemsFactory.itemDetails();

        promise.then(function (data) {
            $scope.itemDetails = data;
            $scope.selected = data[0];

            console.log($scope.itemDetails);
            console.log($scope.selected);
        });

}]);

Collectives™ on Stack Overflow

Load first json object by default - Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related