Access nested JSON with Angularjs

Asked

Viewed 51 times

0

I have a file .json and I need to list his items as follows.

Enterprise 1

  • Value 1

Enterprise 1

  • Value 2

Enterprise 2

  • Value 1

Enterprise 2

  • Value 2

Below follows 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 follows 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.

Enterprise 1

  • Value 1

  • Value 2

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

angularjs

1 answer

0

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

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

I see the code running right 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>
<script src="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>

It may be the lack of the controller ModalController which is missing from your code, or missing the inclusion of that contains that code.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.