Чтение содержимого файла JSON с помощью AngularJs - PullRequest
Новая
       2

Чтение содержимого файла JSON с помощью AngularJs

0 голосов
/ 08 мая 2018

Я пытаюсь прочитать и отобразить раздел публикаций и разрешений из файла JSON ниже, используя angularjs. Я пытаюсь отобразить значения идентификатора и заголовка из узла публикаций, а также значения разрешения, терминов из узлов разрешений. Булочка, когда я пытаюсь запустить код ниже, я получаю пустую страницу.

Вот мой код HTML и Js - 

<div ng-controller="rFind">
    <p>The ID is {{pubs.idno}}</p>
    <p>The content title is {{pubs.title}}</p>
</div>

angular.module('demo',[])
.controller('rFind', function ($scope, $http) {
   $http.get('rfind.json').success(function (data) {
       $scope.pubs = data.publications;
    });
});

Файл JSON - 

{
  "location": "US",
  "publications": [
    {
      "idno": "1360-0869",
      "workId": "122936490",
      "title": "INTERNATIONAL REVIEW OF LAW (1996- )",
      "permissions": [
        {
          "tou": "DIGITAL",
          "resolution": "GRANT",
          "terms": [
            {
              "code": "d0214dec",
              "description": "This journal title may publish some Open Access articles, which provide specific user rights for reuse."
            },
            {
              "code": "93bfc4ca",
              "description": "User may not include copies of portions of this Work in presentations shown to external audiences."
            }
          ]
        },
        {
          "tou": "PRINT",
          "resolution": "GRANT",
          "terms": [
            {
              "code": "d0214dec",
              "description": "This journal title may publish some Open Access articles, which provide specific user rights for reuse."
            }
          ]
        },
        {
          "tou": "REACTIVELY_SHARE",
          "resolution": "GRANT",
          "terms": [
            {
              "code": "d0214dec",
              "description": "This journal title may publish some Open Access articles, which provide specific user rights for reuse."
            }
          ]
        }
      ],
      "startYear": 1996,
      "customMessages": [ ],
      "publishers": [ "ROUTLEDGE" ]
    }
  ]
}

Не уверен, что не так с моим кодом. Любая помощь будет оценена.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Publications возвращается в виде массива, вам нужно сделать одно из двух: исправить конечную точку, чтобы она возвращала объект, или использовать прототип Array find, чтобы получить объект, или получить первый индекс, если он существует. Вы пытаетесь сослаться на объект, когда он является массивом. 

$scope.pubs = data.publications[0];

$scope.pubs = data.publications.find(record => record.idno === param.id);

Или вы можете сделать ng-repeat для scope.pubs.

0 голосов
/ 09 мая 2018

Спасибо всем за ваши ответы. Это то, что, наконец, сработало для меня -

rf.js 

var myApp = angular.module('myApp', []);

myApp.controller('rFind', ['$scope', '$http', function ($scope, $http) {

    $http({
        method: "GET",
        url: "/js/rf.json"
    }).then(function mySuccess(response) {
        $scope.posts = response.data;
        $scope.pubs = response.data.publications;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
}]);

rf.htm 

<body ng-app='myApp'>
    <div ng-controller='rFind'>
            <p>ID: {{ posts.location }} </p>
            <div ng-repeat="pub in pubs">
                <p> idn: {{pub.idno}} - {{pub.title}}</p>
                <div ng-repeat="perm in pub.permissions">
                    <p> -> {{perm.tou}} : {{perm.resolution}} </p>
                    <div ng-repeat="trm in perm.terms">
                        <p>{{trm.description}}</p>
                    </div>
                </div>
            </div>
        </div>>
</body>
0 голосов
/ 08 мая 2018

Можете ли вы попробовать это? 

angular.module('demo',[])
.controller('rFind', function ($scope, $http) {

$http.get('rfind.json').then(function (data) {
   $scope.pubs = data.data.publications;
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...