How to append json objects below exixting data in angularjs

Question

as html page

 <div class="posts" ng-repeat="s in news" ng-init="moreNews()">
      {{s.news}}
 </div>
 <input type="button" value="get data" onclick="moreNews()"/>

at controller

$scope.moreNews = function () {
       $http.get("test?p=" + $scope.pno)
                .then(function (response) {
                    console.log(response);
                    $scope.news = response.data.news;
                    $scope.pno++;
                  }, function (data) {
                    alert("Oops! Unable to get data from server")
                });
    };

Here I am getting data from server and showing to html page. Here first response is showin data properly. but for second response it is overriding the data I want to add next data to below the first one and so one.

How to append lists below the existing data?

Chatar Singh · Accepted Answer · 2018-05-28 09:58:23Z

3

$scope.moreNews = function () {
       $http.get("test?p=" + $scope.pno)
                .then(function (response) {
                    console.log(response);
                    for(var i=0;i<response.data.news.length;i++){
                      $scope.news.push(response.data.news[i]);
                    }                    
                    $scope.pno++;
                  }, function (data) {
                    alert("Oops! Unable to get data from server")
                });
    };

answered May 28, 2018 at 9:58

Chatar Singh

1,06311 silver badges14 bronze badges

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

2 Comments

Chatar Singh Over a year ago

Declare $scope.news = []; on page load

Panos K Over a year ago

response.data.news.forEach(x=> $scope.news.push(x)); make it even shorter instead of for loop, cheers

manish kumar · Accepted Answer · 2018-05-28 10:05:53Z

2

Try out this code

$scope.moreNews = function () {
       $http.get("test?p=" + $scope.pno)
                .then(function (response) {
                    console.log(response);
                    $scope.news=$scope.news.concat(response.data.news);
                    $scope.pno++;
                  }, function (data) {
                    alert("Oops! Unable to get data from server")
                });
    };

answered May 28, 2018 at 10:05

manish kumar

4,7184 gold badges39 silver badges52 bronze badges

Comments

Dilushika Weerawardhana · Accepted Answer · 2018-05-28 10:20:56Z

1

$scope.news = [];

$scope.moreNews = function () {
   $http.get("test?p=" + $scope.pno)
            .then(function (response) {
                $scope.news.push(response.data.news);
                $scope.pno++;
              }, function (data) {
                alert("Oops! Unable to get data from server")
            });
};

The push() method - Adds one or more elements to the end of the same array.

answered May 28, 2018 at 10:20

Dilushika Weerawardhana

1,6211 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to append json objects below exixting data in angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related