A guide on displaying a JSON object using the ng-repeat directive

Question

A guide on displaying a JSON object using the ng-repeat directive

Looking to create a dynamic treeview menu with angularJS? Wondering how to achieve the desired results using a controller ($scope.results) and JSON data? Check out the code snippet below for an example of how to structure your treeview:

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file"><span>page1</span></li>
       <li class="file"><span>page2</span></li>
     </ul>
   </li>
   <li class="folder"><span>TestSuites</span>
     <ul>
       <li class="file"><span>TestSuites1</span></li>
     </ul>
   </li>
</ul>

JSON data:

{
    "result": [
        {
            "@type": "d",
            "@rid": "#-2:1",
            "@version": 0,
            "name": "pg3"
        },
        {
            "@type": "d",
            "@rid": "#-2:2",
            "@version": 0,
            "name": "pg3"
        },
        {
            "@type": "d",
            "@rid": "#-2:3",
            "@version": 0,
            "name": "pg3"
        }
    ],
    "notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}

Controller setup:

vController.controller('v-PagesController', [
                '$scope',
                '$q',
                'vRESTService',
                function($scope, $q, vRESTService) {

                    vRESTService.getPages().then(
                            function(results) {
                                $scope.results = results;
                                console.log(results);
                              }, 
                            function() {
                                console.log(Error);
                            });
                }               
        ]);

javascript angularjs jsp requirejs orientdb

Answer 1

Answer №1

To retrieve data from a JSON file using AngularJS, you can utilize the $http.get method in your JavaScript file. Here is an example:

JavaScript File
$http.get('.json').success(function(data) {
    $scope.name = name;
});

HTML File
<table>
   <tr ng-repeat="item in items">
      <td>{{item.Name}}</td>
   </tr>
</table>

Answer 2

To retrieve data from a JSON file using AngularJS, you can utilize the $http.get method in your JavaScript file. Here is an example:

JavaScript File
$http.get('.json').success(function(data) {
    $scope.name = name;
});

HTML File
<table>
   <tr ng-repeat="item in items">
      <td>{{item.Name}}</td>
   </tr>
</table>

Answer 3

Answer №2

Presenting only the pages part since you mentioned that the json does not yet contain the testsuites:

Update your controller to assign results to a scope property:

vRESTService.getPages().then(
   function(results) {
      console.log(results);
      $scope.results = results;             
   }

Here is how your view should look like:

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file" ng-repeat="page in results.result"><span>{{page.name}}</span></li>
     </ul>
   </li>
</ul>

http://plnkr.co/edit/mKLTxwskjPECkQUCsV05?p=preview

I suggest updating your json to include a pages property and a testSuites property:

{
  "pages": [
    {
        "@type": "d",
        "@rid": "#-2:1",
        "@version": 0,
        "name": "pg3"
    },
    {
        "@type": "d",
        "@rid": "#-2:2",
        "@version": 0,
        "name": "pg3"
    },
    {
        "@type": "d",
        "@rid": "#-2:3",
        "@version": 0,
        "name": "pg3"
    }
  ],
  "testSuites": [
    {
        "name": "TestSuites1"
    }
  ],
  "notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}

Your updated view would be:

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file" ng-repeat="page in results.pages"><span>{{page.name}}</span></li>
     </ul>
   </li>
   <li class="folder"><span>TestSuites</span>
     <ul>
       <li class="file" ng-repeat="testSuite in results.testSuites"><span>{{testSuite.name}}</span></li>
     </ul>
   </li>
</ul>

http://plnkr.co/edit/dL2OGTkiEOSzmK0O1pux?p=preview

Answer 4

Presenting only the pages part since you mentioned that the json does not yet contain the testsuites:

Update your controller to assign results to a scope property:

vRESTService.getPages().then(
   function(results) {
      console.log(results);
      $scope.results = results;             
   }

Here is how your view should look like:

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file" ng-repeat="page in results.result"><span>{{page.name}}</span></li>
     </ul>
   </li>
</ul>

http://plnkr.co/edit/mKLTxwskjPECkQUCsV05?p=preview

I suggest updating your json to include a pages property and a testSuites property:

{
  "pages": [
    {
        "@type": "d",
        "@rid": "#-2:1",
        "@version": 0,
        "name": "pg3"
    },
    {
        "@type": "d",
        "@rid": "#-2:2",
        "@version": 0,
        "name": "pg3"
    },
    {
        "@type": "d",
        "@rid": "#-2:3",
        "@version": 0,
        "name": "pg3"
    }
  ],
  "testSuites": [
    {
        "name": "TestSuites1"
    }
  ],
  "notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}

Your updated view would be:

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file" ng-repeat="page in results.pages"><span>{{page.name}}</span></li>
     </ul>
   </li>
   <li class="folder"><span>TestSuites</span>
     <ul>
       <li class="file" ng-repeat="testSuite in results.testSuites"><span>{{testSuite.name}}</span></li>
     </ul>
   </li>
</ul>

http://plnkr.co/edit/dL2OGTkiEOSzmK0O1pux?p=preview

Answer 5

Answer №3

In AngularJS, you can utilize the $http.get method to retrieve JSON files. Once you have received the data in the response, store it within a $scope variable in your controller. After that, you can use ng-repeat to display the data. Take a look at this example for more information:

Answer 6

In AngularJS, you can utilize the $http.get method to retrieve JSON files. Once you have received the data in the response, store it within a $scope variable in your controller. After that, you can use ng-repeat to display the data. Take a look at this example for more information:

A guide on displaying a JSON object using the ng-repeat directive

Answer №1

Answer №2

Answer №3

Similar questions

Grunt: Can you explain the concept of recursive templates?

Challenges arise when attempting to authenticate a user with password.js

Using a function to send multiple child data in Firebase

CSS struggles after implementing conditional checks in return statement for an unordered list

Enhancing Angular's templates and handling cache invalidation

Using an external module in a Vue SFC: a beginner's guide

Is there a viable substitute for websockets that can be utilized on shared hosting platforms?

What is the best way to manage DOM modifications in a responsive design layout?

Tips for retrieving the slug value in getStaticProps for invoking the API with the slug as a parameter

Is it possible to use Javascript to gradually fade in text, one word at a time, with multiple divs instead of just one?

Sinon and Chai combination for testing multiple nested functions

I am encountering an issue with this code. The objective is to determine the frequency at which a specific word appears in the provided paragraph

Show the contents of a JSON file using Vue

Encountering issues while trying to run npm install for an Angular 7 application, specifically receiving an error stating: "Module not found: @angular-devkit/build-ng-packagr." This error is hindering

The jqGrid displays a plus sign even when the subgrid is empty while using XML

Unable to See Success Notification on First Attempt

Tips for bringing in an npm package in JavaScript stimulus

Loading animation reminiscent of a whirlpool, similar to the movement

What is the best way to implement JQuery in order to trigger an event in a text box whenever the user hits the "enter

Execute a function on a canvas timer using the setTimeout method