how to print json array object array in angularjs and html

Question

angularjs controller

controller('FaqCtrl', function($scope, $http)
{
$http.get("api/index.php/faq/getqusans")
.success(function (response) {
$scope.name = response.catname;

$scope.records = response.catname;

//$scope.question = response.records;

}); 
}).

HTML Code

<div ng-controller="FaqCtrl" class="row">
<div class="" ng-repeat="y in name">
    <h3>{{ y.name }}</h3><br/>
    <div class="col-md-6" ng-repeat="x in records">

        <accordion close-others="true" >
            <accordion-group is-open="status1.open" ng-class="{'expanded': status1.open}" >
                <accordion-heading>{{ x.question }}</accordion-heading>
                {{ x.answer }}
            </accordion-group>

        </accordion>

    </div>
</div>

Json response

{
              "catname": [
                {
                  "name": "How do i 2",
                  "records": [
                    {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    }
                  ]
                },
                {
                  "name": "How do i 3h",
                  "records": [
                    {
                      "question": "supply the dishes being demanded by heartyy",
                      "answer": "Anim"
                    },
                    {
                      "question": "sdsffd",
                      "answer": "vcvcvcvcvcv"
                    }
                  ]
                }
              ]
            }

I am not gat the question and answer print in html. only print the name is like 'How do i 2' and 'How do i 2' but name have the quection 'propose a new dish' and answer 'Anim'.

PavanAsTechie · Accepted Answer · 2015-06-23 08:34:01Z

2

We need to write html as below

JSFIDDLE

HTML CODE

  <div ng-app ng-controller="LoginController">
 <div class="col-md-6" ng-repeat="x in parsedData">
<accordion close-others="true">
    <accordion-group is-open="status1.open" ng-class="{'expanded': status1.open}">
        <div>{{ x.name }}</div>
        <div ng-repeat="y in x.records">
            <accordion-heading><p>question is{{ y.question }}</p></accordion-heading>

JS CODE

function LoginController($scope) {
    var dataArr =[];
    var dataJson = {};
    $scope.data = {
              "catname": [
                {
                  "name": "How do i 2",
                  "records": [
                    {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    },
                      {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    },
                      {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    }
                  ]
                },
                {
                  "name": "How do i 3h",
                  "records": [
                    {
                      "question": "supply the dishes being demanded by heartyy",
                      "answer": "Anim"
                    },
                    {
                      "question": "sdsffd",
                      "answer": "vcvcvcvcvcv"
                    }
                  ]
                }
              ]
            };

    $scope.parsedData = $scope.data.catname;
    console.log($scope.parsedData);
};

o/p:

How do i 2
question ispropose a new dish

answer is Anim

question ispropose a new dish

answer is Anim

question ispropose a new dish

answer is Anim

How do i 3h
question issupply the dishes being demanded by heartyy

answer is Anim

question issdsffd

answer is vcvcvcvcvcv

JSFIDDLE

edited Jun 23, 2015 at 8:34

answered Jun 23, 2015 at 6:07

PavanAsTechie

3323 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sachin Saini Over a year ago

Thsi is print only last 2 question. I want to output is like

PavanAsTechie Over a year ago

There are only two question in the json. can you please elaborate your requirement so i can better explain the solution

PavanAsTechie Over a year ago

@sachin I got you here is the desired answer. if you like give one up vote

Sachin Saini Over a year ago

This is print only last 2 question. I want to output is like name: How do i 2 question: propose a new dish answer: Anim name: How do i 3h question: supply the dishes being demanded by heartyy answer: Anim question: sdsffd answer: vcvcvcvcvcv

Sachin Saini Over a year ago

name have the multiple question and Answer

|

Althaf Ibrahim · Accepted Answer · 2017-12-27 06:29:27Z

1

privi_d1: JSON[];
  json: JSON[];

ngOnInit() {
    this.http.get('http://localhost/feitoria/php/device.php')
      .subscribe((data) => {
        this.json = JSON.parse(data.text()).device;
        this.privi_d1 = this.json[0][3];
      }, (error) => {
        console.log(error);
      });
  }

answered Dec 27, 2017 at 6:29

Althaf Ibrahim

112 bronze badges

1 Comment

Althaf Ibrahim Over a year ago

can any one help to get access to the array inside the another array

Tony · Accepted Answer · 2015-06-22 19:10:12Z

0

Try this:

<div class="col-md-6" ng-repeat="x in catname">
    <accordion close-others="true">
        <accordion-group is-open="status1.open" ng-class="{'expanded': status1.open}">
            <accordion-heading>{{ x.records.question }}</accordion-heading>
            {{ x.records.answer }}
        </accordion-group>
    </accordion>  
</div>

edited Jun 22, 2015 at 19:10

Tony

2,4651 gold badge21 silver badges35 bronze badges

answered Jun 22, 2015 at 19:01

bhanu.cs

1,3751 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to print json array object array in angularjs and html

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related