Question

我有一个JSON文件，我想在我的HTML中显示它。但我不知道如何使用深层嵌套对象的语法。

  {
  "questions": [
    {
      "question": "Qw1",
      "answers": [
        {
          "answers": "An1",
          "value": 25
        },
        {
          "answers": "An2",
          "value": 50
        },
        {
          "answers": "An3",
          "value": 75
        },
        {
          "answers": "An4",
          "value": 100
        }
      ]
    },
    {
      "question": "Qw2",
      "answers": [
        {
          "answers": "An1",
          "value": 25
        },
        {
          "answers": "An2",
          "value": 50
        },
        {
          "answers": "An3",
          "value": 75
        },
        {
          "answers": "An4",
          "value": 100
        }
      ]
    }
  ]
}

我不是在尝试使用ng-repeat，因为我需要逐个访问它们。

 <div class="main-content" ng-controller="QuestionCtrl">
                <div id="Content1">
                  <h1>Question 1</h1>
                  <p>{{questions.question[1].answer}}</p>
                  ...........

当然它不起作用。我如何访问我的信息？

Answer 1

有一个working plunker

使用此控制器：

.controller('QuestionCtrl', ['$scope', '$http', function ($scope, $http) { 
  $scope.questions = [];
  $http
    .get("data.json")
    .then(function(response){
      $scope.questions = response.data.questions;
    });
}])

正在加载您的数据，我们可以使用此

<div class="main-content" ng-controller="QuestionCtrl">
  <div id="Content1">
  <h1>Question 1</h1>
  <p>{{questions[0].question}}</p>
  <p>{{questions[0].answers[0]}}</p>
  <p>{{questions[0].answers[1]}}</p>
  </div>
</div>

或者我们可以像这样使用它：

<h1>Question 1</h1>
<p>{{questions[0].question}}</p>
<h2>answer 1</h2>
<p>{{questions[0].answers[0].value}}</p>
<p>{{questions[0].answers[0].answers}}</p>
<h2>answer 2</h2>
<p>{{questions[0].answers[1].value}}</p>
<p>{{questions[0].answers[1].answers}}</p>

将显示数字value和answers 文字

检查here in action

Answer 2

questions是数组，而不是questions.question，而您的JSON不包含answer属性。您尝试使用正确的遍历吗？

questions[0].answers[0].value

应该让你25。

Answer 3

<div class="main-content" *ngFor="let q of questions">
   <h1> {{q.question}}</h1>
    <p *ngFor="let ans of q.answers">{{ans.answers}} = {{ans.value}} </p>
</div>

如何使用angular访问HTML中的JSON数组对象？

3 个答案: