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

Posted 2023-03-05

【中文标题】如何使用角度访问 HTML 中的 JSON 数组对象？

【英文标题】：How to access JSON array object in HTML using angular?

【发布时间】：2015-03-26 08:34:11

【问题描述】：

我有一个 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>
                  ...........

当然不行。我如何访问我的信息？

【参考方案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

【讨论】：

感谢您的努力。但不是 "answers":"An1","value":25 我怎样才能只获取它们的值？

我更新了插件 （重新打开插件） 以及答案。那应该告诉你怎么做。我们可以简单地访问 answers[0].answers 来获取文本和 answer[0].value 来获取数字......祝你好运

Tnx！我知道这很容易xD

【参考方案2】：

<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>

【参考方案3】：

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

questions[0].answers[0].value

应该给你25。