How to push data in angularjs

Question

there is an issue when I'm adding data to list with a function called addGroup.It is giving me this type-error:

   "TypeError: Cannot read property 'push' of undefined"
    at r.$scope.addGroup (main.js:7)
    at fn (eval at compile (angular.js:13365), <anonymous>:4:215)
    at e (angular.js:23613)
    at r.$eval (angular.js:16052)
    at r.$apply (angular.js:16152)
    at HTMLAnchorElement.<anonymous> (angular.js:23618)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.q.handle (jquery.min.js:3)
(anonymous) @ angular.js:12520
(anonymous) @ angular.js:9292
$apply @ angular.js:16157
(anonymous) @ angular.js:23618
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

html code:

<ul ng-repeat = "info in infos | filter:curInfo.name">
       <img src="{{info.image.link}}"/> {{info.name}}
        <li ng-repeat="group in info.groups | filter: curInfo" 
            ng-bind-html="group.name | highlight:curInfo.name">
           <a href="#">{{group.name}}</a>
        </li>
             <div class="add list">
                <a href="" ng-click="addGroup()">+Add group </a>
             </div>
    </ul>

js code:

app.controller('mainCtrl', function($scope , dataService){
        $scope.addGroup = function () {
            var group = {name: "This is a new group"};
            $scope.infos.push(group);
        };

json data

[
   {
      "id":736,
      "name":"Systems",
      "image":{
         "link":"http://i.stack.imgur.com/8KA9j.jpg?s=32&g=1"
      },
      "groups":[
         {
            "id":2168,
            "name":"API",
            "url":"https://wwww.itschools.co.za/api/"
         },
         {
            "id":11955,
            "name":"Assets",
            "url":"https://wwww.itschools.co.za/assets/"
         },
         {
            "id":3179,
            "name":"Design",
            "url":"https://wwww.itschools.co.za/design/"
         },
         {
            "id":207,
            "name":"Development",
            "url":"https://wwww.itschools.co.za/development/"
         },
         {
            "id":70,
            "name":"Intranet",
            "url":"https://wwww.itschools.co.za/intranet/"
         }
      ],
      "url":"https://wwww.itschools.co.za/projects"
   },
   {
      "id":44315,
      "name":"User Agents",
      "image":{
         "link":"http://www.zerohedge.com/sites/default/files/pictures/picture5781.jpg"
      },
      "groups":[
         {
            "id":191599,
            "name":"Alchemy",
            "url":"https://wwww.itschools.co.za/tools/alchemy"
         },
         {
            "id":86822,
            "name":"Empathy",
            "url":"https://wwww.itschools.co.za/tools/empathy"
         },
         {
            "id":86297,
            "name":"Epiphany",
            "url":"https://wwww.itschools.co.za/tools/epiphany"
         },
         {
            "id":131837,
            "name":"Harmony",
            "url":"https://wwww.itschools.co.za/tools/hamony"
         },
         {
            "id":174338,
            "name":"Zagreb",
            "url":"https://wwww.itschools.co.za/tools/zagreb"
         }
      ],
      "url":"https://wwww.itschools.co.za/tools"
   }
]

I have used a navigation bar to show this data. the "groups" part is shown in

and now I want the addGroup function to add new list items but it is added in ul tag.

Answer 1

The main issue seems to be an uninitialized $scope.infos variable. I'm guessing this variable's contents are fetched via your dataService service, and that your intention is to push to the groups member of some element of $scope.infos .

To do that, your addGroups will need to know which groups to push into, so either info or info.groups will need to be passed in as a parameter (I went with the latter).

Here's a pared down version of what I think you're trying to accomplish.

 angular.module('app', []) .factory('dataService', ['$q', function($q) { //dummy service simulating actual dataService var infos = [ { "id":736, "name":"Systems", "image":{ "link":"http://i.stack.imgur.com/8KA9j.jpg?s=32&g=1" }, "groups":[ { "id":2168, "name":"API", "url":"https://wwww.itschools.co.za/api/" }, { "id":11955, "name":"Assets", "url":"https://wwww.itschools.co.za/assets/" }, { "id":3179, "name":"Design", "url":"https://wwww.itschools.co.za/design/" }, { "id":207, "name":"Development", "url":"https://wwww.itschools.co.za/development/" }, { "id":70, "name":"Intranet", "url":"https://wwww.itschools.co.za/intranet/" } ], "url":"https://wwww.itschools.co.za/projects" }, { "id":44315, "name":"User Agents", "image":{ "link":"http://www.zerohedge.com/sites/default/files/pictures/picture5781.jpg" }, "groups":[ { "id":191599, "name":"Alchemy", "url":"https://wwww.itschools.co.za/tools/alchemy" }, { "id":86822, "name":"Empathy", "url":"https://wwww.itschools.co.za/tools/empathy" }, { "id":86297, "name":"Epiphany", "url":"https://wwww.itschools.co.za/tools/epiphany" }, { "id":131837, "name":"Harmony", "url":"https://wwww.itschools.co.za/tools/hamony" }, { "id":174338, "name":"Zagreb", "url":"https://wwww.itschools.co.za/tools/zagreb" } ], "url":"https://wwww.itschools.co.za/tools" } ]; return { infos: function() { return $q.resolve(infos); } } }]) .controller('mainCtrl', ['$scope', 'dataService', function($scope, dataService) { dataService.infos().then(function(infos) { $scope.infos = infos; }); $scope.addGroup = function(groups) { var group = {name: "This is a new group"}; groups.push(group); }; }]) ; 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> <div ng-app="app"> <div ng-controller="mainCtrl"> <!-- filter and highlight stuff removed for simplicity --> <ul ng-repeat = "info in infos"> <img src="{{info.image.link}}"/> {{info.name}} <li ng-repeat="group in info.groups"> <a ng-href="{{group.url}}">{{group.name}}</a> </li> <div class="add list"> <a href="" ng-click="addGroup(info.groups)">+Add group </a> </div> </ul> </div> </div> 

The dataService is mocked up since it wasn't provided in the question, but it should be clear on how to transform that into something that could fetch the contents via eg the $http service.

One other change was to use ng-href="{{group.url}}" on your per-group <a> s; it wasn't mentioned but I assumed that's what the url member was for.

Answer 2

Try this

app.controller('mainCtrl', function($scope , dataService){
        $scope.addGroup = function () {
            $scope.infos = [];
            var group = {name: "This is a new group"};
            $scope.infos.push(group);
        };