How to access JSON array object in HTML using angular?

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

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

Method 3

questions is the array, not questions.question, and your JSON does not contain answer properties. Did you try using the correct traversal?

questions[0].answers[0].value

should get you 25.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply