如何使用angular访问HTML中的JSON数组对象？ [英] How to access JSON array object in HTML using angular?

问题描述

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

  {
questions：[
 {
question：Qw1，
answers：[
 {
answers：An1，
value：25 
}，
 {
answers：An2，
value：50 
}，
 {
answers ：An3，
value：75 
}，
 {
answers：An4，
value：100 
 } 
 
 $ b $ question $ bw 
 
 
 $ b $ ：An1，
value：25 
}，
 {
answers：An2，
value：50 
 }，
 {
answers：An3，
value：75 
}，
 {
answers：An4 ，
价值：100 
} 
] 
} 
] 
} 
  

I我不想尝试使用ng-repeat，因为我需要逐一访问它们。

 < div class = main-contentng-controller =QuestionCtrl> 
< div id =Content1> 
< h1>问题1< / h1> 
< p> {{questions.question [1] .answer}}< / p> 
 ........... 
  

因为它不起作用。我如何访问我的信息？

使用此控制器：

pre $ .controller（'QuestionCtrl'，['$ scope'，'$ http'，function（$ scope，$ http）{
$ scope.questions = [];
$ http
.get（data.json）
.then（function（response）{
$ scope.questions = response.data.questions;
}）;
}]）


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

 < div class =main-contentng-controller =QuestionCtrl> 
< div id =Content1> 
< h1>问题1< / h1> 
< p> {{questions [0] .question}}< / p> 
< p> {{questions [0] .answers [0]}}< / p> 
< p> {{questions [0] .answers [1]}}< / p> 
< / div> 
< / div> 
  

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

 < h1>问题1< / h1> 
< p> {{questions [0] .question}}< / p> 
< h2>答案1< / h2> 
< p> {{questions [0] .answers [0] .value}}< / p> 
< p> {{questions [0] .answers [0] .answers}}< / p> 
< h2>答案2< / h2> 
< p> {{questions [0] .answers [1] .value}}< / p> 
< p> {{questions [0] .answers [1] .answers}}< / p> 
  

它将显示数字值和 answers text

检查这里是行动

I have a JSON file and I want to display it in my HTML. But I dont know how to use the syntax for deeply nested objects.

  {
  "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
        }
      ]
    }
  ]
}

I am not trying to use ng-repeat, as I need to access them them one by one.

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

Ofcourse it doesn't work. How do I acces my information?

解决方案

There is a working plunker

Using this controller:

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

which is loading your data, we can use this

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

Or we can use it like this:

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

which will show the numeric value and answers text

Check it here in action

这篇关于如何使用angular访问HTML中的JSON数组对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！