Access nested JSON with AngularJS

Question

Access nested JSON with AngularJS

Navigation

#1 by (0 votes)

0

I have a file .json and I need to list the items in it as follows.

Company 1


Value 1


Company 1


Value 2


Company 2


Value 1


Company 2


Value 2

Below is the structure of my .json file

{
"market": {
    "company": [
        {
            "name": "Petrobras",
            "logo": "https://s29.postimg.org/lnt4mtp2f/petrobras.png",
            "stock": [
                {
                    "name": "PETR4",
                    "openingvalue": "22.45",
                    "actualvalue": "22.54"
                },
                {
                    "name": "PETR3",
                    "openingvalue": "28.10",
                    "actualvalue": "28.05"
                }
            ]
        },
        {
            "name": "VALE",
            "logo": "https://s29.postimg.org/u8mgdzz8n/vale.png",
            "stock": [
                {
                    "name": "VALE4",
                    "openingvalue": "17.65",
                    "actualvalue": "17.32"
                },
                {
                    "name": "VALE3",
                    "openingvalue": "21.11",
                    "actualvalue": "21.32"
                }
            ]
        },
        {
            "name": "ITAU",
            "logo": "https://s29.postimg.org/jul61dxk7/itau.png",
            "stock": [
                {
                    "name": "ITUB4",
                    "openingvalue": "8.7",
                    "actualvalue": "8.89"
                },
                {
                    "name": "ITUB3",
                    "openingvalue": "12.73",
                    "actualvalue": "12.91"
                }
            ]
        },
        {
            "name": "BRADESCO",
            "logo": "https://s29.postimg.org/58u5d50rr/bradesco.png",
            "stock": [
                {
                    "name": "BBDC4",
                    "openingvalue": "6.29",
                    "actualvalue": "6.08"
                },
                {
                    "name": "BBDC3",
                    "openingvalue": "8.37",
                    "actualvalue": "8.42"
                }
            ]
        },
        {
            "name": "AMBEV",
            "logo": "https://s29.postimg.org/tmsfkrxuv/ambev.png",
            "stock": [
                {
                    "name": "ABEV4",
                    "openingvalue": "7.65",
                    "actualvalue": "7.43"
                },
                {
                    "name": "ABEV3",
                    "openingvalue": "9.78",
                    "actualvalue": "10.02"
                }
            ]
        },
        {
            "name": "OI",
            "logo": "https://s29.postimg.org/ejbbdsht3/oi.png",
            "stock": [
                {
                    "name": "OIBR4",
                    "openingvalue": "3.94",
                    "actualvalue": "3.67"
                },
                {
                    "name": "OIBR3",
                    "openingvalue": "5.09",
                    "actualvalue": "5.01"
                }
            ]
        },
        {
            "name": "GOL",
            "logo": "https://s29.postimg.org/8478k04rr/gol.png",
            "stock": [
                {
                    "name": "GOLL4",
                    "openingvalue": "11.26",
                    "actualvalue": "11.07"
                },
                {
                    "name": "GOLL3",
                    "openingvalue": "16.70",
                    "actualvalue": "16.93"
                }
            ]
        },
        {
            "name": "AMERICANAS",
            "logo": "https://s29.postimg.org/69ue29hrb/americanas.png",
            "stock": [
                {
                    "name": "LAME4",
                    "openingvalue": "1.85",
                    "actualvalue": "1.88"
                },
                {
                    "name": "LAME3",
                    "openingvalue": "2.57",
                    "actualvalue": "2.59"
                }
            ]
        },
        {
            "name": "SMILES",
            "logo": "https://s29.postimg.org/hfyce2nmv/smiles.png",
            "stock": [
                {
                    "name": "SMLE4",
                    "openingvalue": "15.33",
                    "actualvalue": "15.12"
                },
                {
                    "name": "SMLE3",
                    "openingvalue": "18.64",
                    "actualvalue": "18.78"
                }
            ]
        }
    ]
  }
}

Below is the structure of my HTML

<uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" is-open="isOpen" template-url="group-template.html" ng-repeat="lista in main.listas.market.company">
      <div ng-repeat="subLista in lista.stock">
      <uib-accordion-heading>
        <div class="pull-left">
          <img src="{{lista.logo}}" class="img-responsive pull-left">
          <span class="title">{{lista.name}} <span>- {{subLista.name}}</span></span>
        </div>
        <div class="pull-right details">
          <span>{{isOpen ? 'Ocultar' : 'Ver'}} detalhes da ação</span>
          <i class="pull-right glyphicon" ng-class="{'glyphicon-menu-up': isOpen, 'glyphicon-menu-down': !isOpen}"></i>
        </div>
      </uib-accordion-heading>
      <div class="row">
        <div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
          <span class="status green">Abertura:</span> {{subLista.openingvalue}}
        </div>
        <div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
          <span class="status red">Atual:</span> {{subLista.actualvalue}}
        </div>
        <div class="col-lg-2 col-lg-offset-4 col-md-2 col-sm-2 col-xs-2" ng-controller="ModalController as $ctrl">
          <button type="submit" class="btn btn-default pull-right" ng-click="$ctrl.open('md')">Vender</button>
        </div>
      </div>
      </div>
  </uib-accordion>

The way I did the 2 values of each company are appearing within that company, as follows.

Company 1


Value 1



Value 2

I need to make the company name repeat and different values.

angularjs

asked by anonymous 20.01.2017 / 02:49

1 answer

Table responsible and table bordered in JQUERY function Spring Security + CDI + HibernateFilter

score 0 · Answer 1

In fact your code has an error related to this tag :

<div class="col-lg-2 col-lg-offset-4 col-md-2 col-sm-2 col-xs-2" ng-controller="ModalController as $ctrl">
    <button type="submit" class="btn btn-default pull-right" ng-click="$ctrl.open('md')">Vender</button>
</div>

which ng-controller="ModalController as $ctrl" , for some reason was not mentioned in the question. Withdrawing this part, it worked, and the rest is practically correct.

I see the code running just below:

var app = angular.module('app', [])
  .controller('ctrl', ['$scope',
    function($scope) {

      $scope.main = {
        listas: {
          "market": {
            "company": [{
              "name": "Petrobras",
              "logo": "https://s29.postimg.org/lnt4mtp2f/petrobras.png",
              "stock": [{
                "name": "PETR4",
                "openingvalue": "22.45",
                "actualvalue": "22.54"
              }, {
                "name": "PETR3",
                "openingvalue": "28.10",
                "actualvalue": "28.05"
              }]
            }, {
              "name": "VALE",
              "logo": "https://s29.postimg.org/u8mgdzz8n/vale.png",
              "stock": [{
                "name": "VALE4",
                "openingvalue": "17.65",
                "actualvalue": "17.32"
              }, {
                "name": "VALE3",
                "openingvalue": "21.11",
                "actualvalue": "21.32"
              }]
            }, {
              "name": "ITAU",
              "logo": "https://s29.postimg.org/jul61dxk7/itau.png",
              "stock": [{
                "name": "ITUB4",
                "openingvalue": "8.7",
                "actualvalue": "8.89"
              }, {
                "name": "ITUB3",
                "openingvalue": "12.73",
                "actualvalue": "12.91"
              }]
            }, {
              "name": "BRADESCO",
              "logo": "https://s29.postimg.org/58u5d50rr/bradesco.png",
              "stock": [{
                "name": "BBDC4",
                "openingvalue": "6.29",
                "actualvalue": "6.08"
              }, {
                "name": "BBDC3",
                "openingvalue": "8.37",
                "actualvalue": "8.42"
              }]
            }, {
              "name": "AMBEV",
              "logo": "https://s29.postimg.org/tmsfkrxuv/ambev.png",
              "stock": [{
                "name": "ABEV4",
                "openingvalue": "7.65",
                "actualvalue": "7.43"
              }, {
                "name": "ABEV3",
                "openingvalue": "9.78",
                "actualvalue": "10.02"
              }]
            }, {
              "name": "OI",
              "logo": "https://s29.postimg.org/ejbbdsht3/oi.png",
              "stock": [{
                "name": "OIBR4",
                "openingvalue": "3.94",
                "actualvalue": "3.67"
              }, {
                "name": "OIBR3",
                "openingvalue": "5.09",
                "actualvalue": "5.01"
              }]
            }, {
              "name": "GOL",
              "logo": "https://s29.postimg.org/8478k04rr/gol.png",
              "stock": [{
                "name": "GOLL4",
                "openingvalue": "11.26",
                "actualvalue": "11.07"
              }, {
                "name": "GOLL3",
                "openingvalue": "16.70",
                "actualvalue": "16.93"
              }]
            }, {
              "name": "AMERICANAS",
              "logo": "https://s29.postimg.org/69ue29hrb/americanas.png",
              "stock": [{
                "name": "LAME4",
                "openingvalue": "1.85",
                "actualvalue": "1.88"
              }, {
                "name": "LAME3",
                "openingvalue": "2.57",
                "actualvalue": "2.59"
              }]
            }, {
              "name": "SMILES",
              "logo": "https://s29.postimg.org/hfyce2nmv/smiles.png",
              "stock": [{
                "name": "SMLE4",
                "openingvalue": "15.33",
                "actualvalue": "15.12"
              }, {
                "name": "SMLE3",
                "openingvalue": "18.64",
                "actualvalue": "18.78"
              }]
            }]
          }
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" is-open="isOpen" template-url="group-template.html" ng-repeat="lista in main.listas.market.company">
      <div ng-repeat="subLista in lista.stock">            
        <uib-accordion-heading>
          <div class="pull-left">
            <img src="{{lista.logo}}" class="img-responsive pull-left">
            <span class="title">{{lista.name}} <span>- {{subLista.name}}</span></span>
          </div>
          <div class="pull-right details">
            <span>{{isOpen ? 'Ocultar' : 'Ver'}} detalhes da ação</span>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-menu-up': isOpen, 'glyphicon-menu-down': !isOpen}"></i>
          </div>
        </uib-accordion-heading>
        <div class="row">
          <div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
            <span class="status green">Abertura:</span> {{subLista.openingvalue}}
          </div>
          <div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
            <span class="status red">Atual:</span> {{subLista.actualvalue}}
          </div>
          <div class="col-lg-2 col-lg-offset-4 col-md-2 col-sm-2 col-xs-2">
            <button type="submit" class="btn btn-default pull-right" ng-click="$ctrl.open('md')">Vender</button>
          </div>
        </div>
      </div>
    </div>
  </uib-accordion>
</div>

Possible to be missing the controller ModalController that is missing from your code, or missing the javascript that contains this code.