使用AngularJs读取JSON文件内容

时间:2018-05-08 18:30:04

标签: angularjs json

我正在尝试使用angularjs从下面的JSON文件中读取和显示发布和权限部分。我试图显示发布节点中的idno和title值以及来自权限节点的tou,resolution和terms值。发髻当我尝试在代码下面运行时,我得到空白页。

这是我的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 :(得分:1)

Publications作为一个数组返回,你需要做两件事之一 - 修复端点以便返回一个对象,或者使用Array原型find来抓取对象,或抓住第一个索引存在。当它是一个数组时,你试图引用该对象。

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

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

或者你可以在scope.pubs上进行ng-repeat。

答案 1 :(得分:0)

你能试试吗?

df2 <- tidyr::gather(df, "x", "y", V1:V+ncol(mat)

答案 2 :(得分:0)

感谢大家的回复。这最终对我有用 -

rf.js

class Category(models.Model):
    name = models.CharField(max_length=264)

   def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = "categories"

class Status(models.Model):
    name = models.CharField(max_length=264)

   def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = "status"

class Product(models.Model):
    title = models.CharField(max_length=264)
    description = models.CharField(max_length=264)
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    price = models.DecimalField(max_digits=10)
    status = models.ForeignKey(Status, on_delete=models.CASCADE)

rf.htm

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;
    });
}]);