AngularJs read json file

Question

I have a tree which is created dynamically with json.There is a one controller and in this controller there is a json array.I use this json to create a tree,but i need to read this json from file externally.

My controller;

..........
$scope.myjson = 
{       
    "option1": [
        {   
            "child":[{"label":"Test1" },{"label":"Test2"}],
            "id": "option1"

        }
    ],

"option2": [
        {   
            "child":[{"label":"Test1.1",}],
            "id": "option2"
        }
    ],
   ...........
   }

Json array reading part(In Controller);

angular.forEach($scope.myjson, function(value, key) 
        {
         if (key === 'option1') 
                {
                for(var t=0;t<$scope.myjson[key][0].child.length;t++)
                    {
                     ......Somethings.........
                     }
                 }

I want to call json file and read it to create a tree.How can i call json file and read in angularjs?

i have tried $http.get before but i could not solve the problem ,could you give me an example jsfiddle? — user4773604
– user4773604, Commented Apr 28, 2015 at 6:08

JuniorDev · Accepted Answer · 2015-04-28 06:03:02Z

2

Reading JSON in Angular is pretty straightforward with $http. Keep in mind that $http will return a promise, and you need to resolve it before processing.

Here is a sample code:

$http.get('assets/messages.json').then(function (data) {
            /** work with data **/
});

answered Apr 28, 2015 at 6:03

JuniorDev

1,2002 gold badges9 silver badges19 bronze badges

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

1 Comment

user4773604 Over a year ago

could you give me an example similar to my task

Himanshu Bhandari · Accepted Answer · 2015-04-28 06:14:19Z

0

Here you can get a complete tutorial regarding your problem. You just need to modify it in your way.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>

answered Apr 28, 2015 at 6:14

Himanshu Bhandari

1,8892 gold badges25 silver badges38 bronze badges

Collectives™ on Stack Overflow

AngularJs read json file

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