Browse JSON - Angularjs

Asked

Viewed 622 times

0

I have the following object:

{ 
"_id" : ObjectId("5a0ae1a032e3762988cddb11"), 
"numeroBo" : NumberInt(4), 
"relato" : "aaaa", 
"modus" : "bbb", 
"falhasApuradas" : "aaaa", 
"eventosDeRisco" : [

], 
"acoesCriminosas" : [

], 
"alertas" : [
    {
        "_id" : ObjectId("5a0ae1a032e3762988cddb13"), 
        "tipoAcao" : [
            {
                "ticked" : true, 
                "name" : "Furto com maçarico"
            }, 
            {
                "ticked" : true, 
                "name" : "Roubo com furadeira"
            }
        ]
    }
], 
"veiculos" : [

], 
"suspeitos" : [
    {
        "_id" : ObjectId("5a0ae1a032e3762988cddb12"), 
        "name" : [

        ]
    }
], 
"longitude" : "-52.02091813087464", 
"latitude" : "-27.224810663086224", 
"fonte" : [
    {
        "ticked" : true, 
        "name" : "Polícia Civil"
    }, 
    {
        "ticked" : true, 
        "name" : "Gerente"
    }
], 
"dataCadastro" : ISODate("2017-11-14T12:29:20.721+0000"), 
"__v" : NumberInt(0)
}

Json in the browser console:

inserir a descrição da imagem aqui

I need to get the index data numeroBo and alertas > tipoAcao > name and show in a table. I know that I must use forEachs to access this data, however, I can’t understand the logic for after picking, how to show in the table (ng-repeat inside a foreach?) I did this foreach structure, I was able to access the data, but not in the right way.

   angular.forEach(vm.alertas, function(value, key){
      vm.numBo = value.numeroBo
      vm.alert = value.alertas
      angular.forEach(vm.alert, function(value, key){
        vm.acoes = value.tipoAcao
        angular.forEach(vm.acoes, function(value, key){ 
          vm.tipoAcao = value.name
        })
      })     

      vm.final = {
        bo: vm.numBo,
        acao: vm.tipoAcao
      }
      console.log(vm.final.bo, vm.final.acao)
  })
angularjs json array foreach

  • You have the Json there?

  • I edited the question, it’s in hand!

  • 1

    Okay, but you need to work on that Json

  • 1

    I copied JSON from "studio 3T for MONGODB", so it looks like this hahah. The return is pretty much the way you said it. Thank you so much for your help!

2 answers

3


First of all, this return should be improved by removing ObjectId, ISODate and NumberInt and putting literally its values, so that the forward makes a reading equal to the example below:

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.json = {
    "_id": ("5a0ae1a032e3762988cddb11"),
    "numeroBo": (4),
    "relato": "aaaa",
    "modus": "bbb",
    "falhasApuradas": "aaaa",
    "eventosDeRisco": [

    ],
    "acoesCriminosas": [

    ],
    "alertas": [{
      "_id": ("5a0ae1a032e3762988cddb13"),
      "tipoAcao": [{
          "ticked": true,
          "name": "Furto com maçarico"
        },
        {
          "ticked": true,
          "name": "Roubo com furadeira"
        }
      ]
    }],
    "veiculos": [

    ],
    "suspeitos": [{
      "_id": ("5a0ae1a032e3762988cddb12"),
      "name": [

      ]
    }],
    "longitude": "-52.02091813087464",
    "latitude": "-27.224810663086224",
    "fonte": [{
        "ticked": true,
        "name": "Polícia Civil"
      },
      {
        "ticked": true,
        "name": "Gerente"
      }
    ],
    "dataCadastro": ("2017-11-14T12:29:20.721+0000"),
    "__v": (0)
  }

});
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr>
      <td>{{json.numeroBo}}<td>
    </tr>
    <tr ng-repeat="t in json.alertas">
      <td ng-repeat="item in t.tipoAcao">
        <ul>
          <li>{{item.name}}</li>
        </ul>
        <td>
    </tr>
  </table>
</div>

  • I was testing here and it didn’t work, I added to the question the way I get JSON from my backend in the browser console. Can you give me a help?

  • @Fred put the full return. I’m on hold but the answer works if you noticed?

2

The @Virgilio response is correct, but in case you want to have a table instead of ul li (Which I particularly find the best option), follows an example from me also to complement
:)

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.obj = {
    "_id": "5a0ae1a032e3762988cddb11",
    "numeroBo": 4,
    "relato": "aaaa",
    "modus": "bbb",
    "falhasApuradas": "aaaa",
    "eventosDeRisco": [

    ],
    "acoesCriminosas": [

    ],
    "alertas": [{
      "_id": "5a0ae1a032e3762988cddb13",
      "tipoAcao": [{
        "ticked": true,
        "name": "Furto com maçarico"
      }, {
        "ticked": true,
        "name": "Roubo com furadeira"
      }]
    }],
    "veiculos": [

    ],
    "suspeitos": [{
      "_id": "5a0ae1a032e3762988cddb12",
      "name": [

      ]
    }],
    "longitude": "-52.02091813087464",
    "latitude": "-27.224810663086224",
    "fonte": [{
      "ticked": true,
      "name": "Polícia Civil"
    }, {
      "ticked": true,
      "name": "Gerente"
    }],
    "dataCadastro": "2017-11-14T12:29:20.721+0000",
    "__v": 0
  }

  $scope.tipoacao = $scope.obj.alertas[0].tipoAcao
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<div ng-app="app" ng-controller="MainCtrl">
  <table class="stripped table">
    <thead>
      <tr>
        <th>NumeroBo</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in tipoacao">
        <td>{{obj.numeroBo}}</td>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

Browser other questions tagged angularjs json array foreach

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