CODEWITHSUNDEEP
javascriptangularjsjsonangularjs-ng-route
user2734182
user2734182

Reputation: 1955

Present information from JSON in two pages

I'm trying to create a webpage which reads json. I have a first page,index, that works just fine. I get correct information from json and print it out correct. But, I want to have a subpage, which have more details. To get this details.

I don't know how to take out the specific object from json and present the information on another page?

My code looks like this:

EXAMPLE JSON

{
  "Name": "foo",
  "array": [
    1,
    2,
    3
  ],
  "boolean": true,
  "null": null,
  "number": 123,
  "object": {
    "a": "b",
    "c": "d",
    "e": "f"
  },
  "string": "Hello World"
}

Lets say that i have 5 jsonobject like this. On my index-page i do ng-repeat to print them, for example, name and number. The name is a link to "more details"-page. More detail presents, for example the array.

ReadJson

var readJSON = function($scope, $interval, $http){
    $http.get("./output/resultJSON.json").success(function(response) {
        $scope.result = response;
    })

ReadMoreDetails

var readDetails = function($scope, $routeParams){

};

ng-route

 var application = angular.module("application", ['ngRoute']);

application.config(function($routeProvider){
    $routeProvider
        .when("/index.html", {
            templateUrl: "index.html"
        })
        .when("/showTable", {
            templateUrl: "templates/resultTable.html",
            controller: "readJSON"
        })
        .when("/showMoreDetails/:id", {
            template: "templates/moreDetails.html",
            controller: "readDetails"
        })
        .otherwise({redirectTo:"/showTable"});
});

MyLink

<div class="link" ng-click="result.Name"><a href="/showMoreDetails/{{result.Name}}">{{result.Name}}</a></div>

Upvotes: 0

Views: 58

Answers (1)

Priyanka
Priyanka

Reputation: 232

You can do this,

var readDetails = function($scope, $routeParams){
    $http.get("./output/resultJSON.json").success(function(response) {
      $scope.result = response;
      for (var i = 0; i < $scope.result.length; i++) {
         if($scope.result[i].Name == $routeParams.id {
           $scope.details = $scope.result[i].array
         }

       };
    })
};

Upvotes: 1

Related Questions