using angularjs to read json file, but its not happening

Question

This is not working for reading and inserting data, I have data.json in js folder

<ion-content>
  <div ng-controller="jsonCtrl" ng-repeat="d in data">
    <h2>{{d[0].name}}</h2>
    <h2>{{d[0].shortname}}</h2>
    <h2>{{d[0].reknown}}</h2>
    <p>{{d[0].bio}}</p>

      <h2>Total Data {{ getTotalData() }}</h2>

      <label>Name</label>
      <input type="text" ng-model="Name">

      <label>Short name</label>
      <input type="text" ng-model="Shortname">

      <label>Reknown</label>
      <input type="text" ng-model="Reknown">

      <label>Bio</label>
      <input type="text" ng-model="Bio">

      <button ng-click="addData()">Add</button>
  </div>
</ion-content>

app.js:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default 
    // (remove this to show the accessory bar above the keyboard for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

My controller looks like this:

.controller('jsonCtrl', function($scope, $http) {

  $http.get('data.json').success(function(res) {
    $scope.data = res;
    console.log($scope.data);
  });

  $scope.addData = function() {
    $scope.data.push({
      name: $scope.Name,
      shortname: $scope.Shortname,
      reknown: $scope.Reknown,
      bio: $scope.Bio
    });
  }

  $scope.getTotalData = function() {
    return $scope.data.length;
  }
});

EDIT:

Example of data.json:

{ "speakers" : [
  { 
    "name":"Mr Bellingham",
    "shortname":"Barot_Bellingham",
    "reknown":"Royal Academy of Painting and Sculpture",
    "bio":"Barot has just finished his final year at The Royal Academy"
  },
  // etc...
]}

sorry if code formatting is inappropriate. I added controller just after run like this: .controller('jsonCtrl', function($scope, $http){ $http.get('data.json').success(function (res){ $scope.data = res; console.log($scope.data); }); $scope.addData = function(){ $scope.data.push({ name:$scope.Name, shortname:$scope.Shortname, reknown:$scope.Reknown ,bio:$scope.Bio }); } $scope.getTotalData= function(){ return $scope.data.length; } }); — Nitesh Dhakal
– Nitesh Dhakal, Commented Jul 19, 2015 at 7:38
@New Dev Did this code worked on your application?? Actually I tried this already but didn't find working. There is only minute change right in this code, like .controller('jsonCtrl', ['$scope','$http', function($scope,$http){ to .controller('jsonCtrl', function($scope,$http){ — Nitesh Dhakal
– Nitesh Dhakal, Commented Jul 21, 2015 at 5:55

New Dev · Accepted Answer · 2015-07-21 08:00:45Z

1

EDIT: I edited the answer because there seem to be more issues in the OP's code

First, you shouldn't place ng-repeat and ng-controller on the same element. ng-repeat has a higher priority, so, what happens is that you have a controller for each iteration of the ng-repeat.

Instead, place ng-controller on the parent element:

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    etc ...

  </div>
</ion-content>

Second, your $scope.data is an array of objects, so {{d[0].name}} seems incorrect - what is the need for [0]? - d already points to each item:

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    <h2>{{d.name}}</h2>
    <h2>{{d.shortname}}</h2>
    <h2>{{d.reknown}}</h2>
    <p>{{d.bio}}</p>
  </div>
</ion-content>

Third, the new item should be outside of the ng-repeat - you don't intend to repeat it, right?

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    <h2>{{d.name}}</h2>
    ... etc
  </div>

  <label>Name</label>
  <input type="text" ng-model="Name">

  <label>Short name</label>
  <input type="text" ng-model="newItem.shortname">

  ... etc

  <button ng-click="addData()">Add</button>    

</ion-content>

Lastly, I'd strongly encourage you to always use bind ng-model to some object's property (or, always use dot .) - instead of directly to a scope property. This has to do with scope's prototypical inheritance - without the dot (.), you would be writing into the property of a child scope, if some directive (e.g. ng-if) created one. It's also easier to reset it.

$scope.newItem = {};
$scope.addData = function(){
  $scope.data.push($scope.newItem);
  $scope.newItem = {};
}

<label>Name</label>
<input type="text" ng-model="newItem.name">

<label>Short name</label>
<input type="text" ng-model="newItem.shortname">

... etc

edited Jul 21, 2015 at 8:00

answered Jul 19, 2015 at 7:57

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

7 Comments

New Dev Over a year ago

@NiteshDhakal, you accepted this answer - did you get it to work?

Nitesh Dhakal Over a year ago

Nope it didnt work, may be something wrong in my js. can you help plz

Nitesh Dhakal Over a year ago

That didnt worked actually. You asked for the json file format i commented as answer below.

New Dev Over a year ago

@NiteshDhakal What exactly does "didn't work" mean? And please remove the answer below - answers are just that - answers, not edits or comments. You can edit the original question instead

New Dev Over a year ago

@NiteshDhakal, ok, based on your data, you seem to be iterating over $scope.data.speakers, so change to ng-repeat="d in data.speakers"

|

Collectives™ on Stack Overflow

using angularjs to read json file, but its not happening

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related