0

Hello I´m having trouble invoking the values of a Json Array using Angular JS.

Heres the JSON array (updated):

    "incidentes":
    [
      {
      "id": 1,
      "estado": "Activo",
      "aperturafecha": "08/08/2014",
      "aperturahora": "14:00:00",
      "clasificacion": "Actualización",
      "diagnostico": "Actualizacion de software",
      "resolucion": "Actualizaciones realizadas",
      "insumos": "Ninguno",
      "cierrefecha": "08/08/2014",
      "cierrehora": "14:05:00",
      "prioridad": "Media",
      "indisponibilidad": "00:05:00",
      "codename": "A1",
      "tipoincidente": "S",
      "hardwares": [],
      "sistemas": [{
        "id": {
          "incidenteid": 1,
          "sistemaid": 19
        },
        "sistema": {
          "id": 19,
          "nombre": "Prestadores",
          "descripcion": "Sistema de carga de prestadores",
          "criticidad": "ALTA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 19,
              "sistemaid": 19
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 20
        },
        "sistema": {
          "id": 20,
          "nombre": "Wiki",
          "descripcion": "Wiki para difusión de conocimientos relavantes al area de Informatica",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 19,
              "sistemaid": 20
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 21
        },
        "sistema": {
          "id": 21,
          "nombre": "Ocs",
          "descripcion": "Servico de iventariado de computadoras.",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 19,
              "sistemaid": 21
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 22
        },
        "sistema": {
          "id": 22,
          "nombre": "Incidentes",
          "descripcion": "Aplicacion de carga y consulta de Incidentes",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 19,
              "sistemaid": 22
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 1
        },
        "sistema": {
          "id": 1,
          "nombre": "Relay Correo y Página",
          "descripcion": "Relay Correo electrónico y página web",
          "criticidad": "ALTA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 1,
              "sistemaid": 1
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 2
        },
        "sistema": {
          "id": 2,
          "nombre": "Correo",
          "descripcion": "Correo electrónico",
          "criticidad": "ALTA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 2,
              "sistemaid": 2
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 3
        },
        "sistema": {
          "id": 3,
          "nombre": "Consultas Públicas",
          "descripcion": "Consulta sobre CUD",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 16,
              "sistemaid": 3
            }
          }, {
            "id": {
              "softwareid": 1,
              "sistemaid": 3
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 4
        },
        "sistema": {
          "id": 4,
          "nombre": "Aplicaciones Internas",
          "descripcion": "Servicio de aplicaciones internas",
          "criticidad": "ALTA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 4,
              "sistemaid": 4
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 5
        },
        "sistema": {
          "id": 5,
          "nombre": "Nube",
          "descripcion": "Servicio de storage on the cloud",
          "criticidad": "BAJA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 5,
              "sistemaid": 5
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 6
        },
        "sistema": {
          "id": 6,
          "nombre": "Backup",
          "descripcion": "Backup",
          "criticidad": "CRITICA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 6,
              "sistemaid": 6
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 7
        },
        "sistema": {
          "id": 7,
          "nombre": "Pentaho",
          "descripcion": "Sistema de información estadístico",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 7,
              "sistemaid": 7
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 8
        },
        "sistema": {
          "id": 8,
          "nombre": "Router",
          "descripcion": "Router + DHCP + DNS + Proxy + VPN Server",
          "criticidad": "CRITICA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 8,
              "sistemaid": 8
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 9
        },
        "sistema": {
          "id": 9,
          "nombre": "Base de Datos",
          "descripcion": "Base de Datos",
          "criticidad": "CRITICA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 9,
              "sistemaid": 9
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 10
        },
        "sistema": {
          "id": 10,
          "nombre": "Discapacidad",
          "descripcion": "Aplicación de carga y consulta de CUD",
          "criticidad": "ALTA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 10,
              "sistemaid": 10
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 11
        },
        "sistema": {
          "id": 11,
          "nombre": "Monitor",
          "descripcion": "Monitor",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 11,
              "sistemaid": 11
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 12
        },
        "sistema": {
          "id": 12,
          "nombre": "Testing general",
          "descripcion": "Testing de apps",
          "criticidad": "BAJA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 11,
              "sistemaid": 12
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 13
        },
        "sistema": {
          "id": 13,
          "nombre": "Testing Deportes",
          "descripcion": "Testing de app Deportes (Beta)",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 11,
              "sistemaid": 13
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 14
        },
        "sistema": {
          "id": 14,
          "nombre": "Control de Versiones",
          "descripcion": "Control de versiones y backup de codigo fuente",
          "criticidad": "CRITICA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 12,
              "sistemaid": 14
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 15
        },
        "sistema": {
          "id": 15,
          "nombre": "Win Server 2012",
          "descripcion": "Controlador de Dominio, servicio de deployment de SO, servidor de archvos",
          "criticidad": "ALTA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 15,
              "sistemaid": 15
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 16
        },
        "sistema": {
          "id": 16,
          "nombre": "Intranet",
          "descripcion": "Intranet y sistema de ticket",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 18,
              "sistemaid": 16
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 17
        },
        "sistema": {
          "id": 17,
          "nombre": "Testing VM",
          "descripcion": "Testing general",
          "criticidad": "BAJA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 18,
              "sistemaid": 17
            }
          }]
        }
      }, {
        "id": {
          "incidenteid": 1,
          "sistemaid": 18
        },
        "sistema": {
          "id": 18,
          "nombre": "Deportes",
          "descripcion": "Sistema de carga de usuarios de pileta",
          "criticidad": "MEDIA",
          "estado": "Activo",
          "activo": true,
          "softwares": [{
            "id": {
              "softwareid": 18,
              "sistemaid": 18
            }
          }]
        }
      }],
      "softwares": [],
      "tecnico": {
        "id": 4,
        "nombre": "Lucas Ignacio Sarafian",
        "legajo": "400450",
        "email": "[email protected]",
        "interno": "5224"
      }
    }]

Heres the HTML page I'm using to show the data. (updated)

   <body ng-controller="IncidenteController">
<div class="container">
    <ul class="nav nav-pills" role="tablist">
        <li class="active"><a href="/index.html">home</a></li>
        <li><a href="/tecnicos.html">Tecnicos</a></li>
        <li><a href="/sistemas.html">Sistemas</a></li>
        <li><a href="/incidentes.html">Incidentes</a></li>
        <li><a href="/login.html">login</a></li>
        <li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
    </ul>
</div>
<form role="form">
    <div class="panel-body">
        <table class="table table-hover table-bordered">
            <thead>
                <tr class="bg-info">
                    <th class="col-md-1" data-align="center">Fecha Apertura</th>
                    <th class="col-md-1" data-align="center">Hora Apertura</th>
                    <th class="col-md-2" data-align="center">Clasificacion</th>
                    <th class="col-md-2" data-align="center">Diagnostico</th>
                    <th class="col-md-2" data-align="center">Resolucion</th>
                    <th class="col-md-1" data-align="center">Insumos</th>
                    <th class="col-md-1" data-align="center">Fecha de Cierre</th>
                    <th class="col-md-1" data-align="center">Hora de Cierre</th>
                    <th class="col-md-2" data-align="center">Prioridad</th>
                    <th class="col-md-2" data-align="center">Indisponibilidad</th>
                    <th class="col-md-2" data-align="center">Sistemas Afectados</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="incidente in incidentes">
                <tr >
                    <td class="col-md-1" data-align="center">{{incidente.aperturafecha}}</td>
                    <td class="col-md-1" data-align="center">{{incidente.aperturahora}}</td>
                    <td class="col-md-2" data-align="center">{{incidente.clasificacion}}</td>
                    <td class="col-md-2" data-align="center">{{incidente.diagnostico}}</td>
                    <td class="col-md-2" data-align="center">{{incidente.resolucion}}</td>
                    <td class="col-md-1" data-align="center">{{incidente.insumos}}</td>
                    <td class="col-md-1" data-align="center">{{incidente.cierrefecha}}</td>
                    <td class="col-md-1" data-align="center">{{incidente.cierrehora}}</td>
                    <td class="col-md-2" data-align="center">{{incidente.prioridad}}</td>
                    <td class="col-md-2" data-align="center">{{incidente.indisponibilidad}}</td>
                    <td class="col-md-2" data-align="center">{{incidente['sistemas'][0].sistema.nombre}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

According to that it should reflect the values but it doesnt I tried every single convination i can think of....

Heres the angular file:

  .controller('IncidenteController', [ '$scope', '$http', function($scope, $http) {

var urlbase = "http://localhost:8080/get/";

var onError = function(reason) {
    $scope.error = "No se pudo encontrar";
};

var onIncidenteComplete = function(response) {
    $scope.incidentes = response.data;
    $scope.sistema = incidente.sistema; <--- this is useless
};

$http.get(urlbase + "incidente/").then(onIncidenteComplete, onError);

$scope.obtenerSistemas = function(incidente) {
    $scope.sistema = incidente.sistema;
};

error console log log error

UDPDATE: " I can now get the values out of the JSON array but cant seem to figure out the way to use NG-repeat to show em.

**Edit: I added a example of the solution in my code for anyone who might need it plus the function to get a object inside the object in the array.

   <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr class="bg-info">
                <th data-align="center">Nombre del Sistema Afectado</th>
                <th data-align="center">Funcion</th>
                <th data-align="center">Estado</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="sistema in incidente.sistemas" class="">
                <td data-align="center">{{sistema.sistema.nombre}}</td>
                <td data-align="center">{{sistema.sistema.descripcion}}</td>
                <td data-align="center">{{sistema.sistema.estado}}</td>
            </tr>
        </tbody>
    </table>
Improve this question
1
  • 1
    Have you inspected response.data to make sure it is what you think it is? What is being displayed? Why is your ng-repeat on the <table>? It's usually on the <tr>. Commented Nov 5, 2015 at 19:38

2 Answers 2

Reset to default
1

If your data comes as an array, this should be enough:

var onIncidenteComplete = function(response) {

  $scope.incidentes = response.data[0].incidentes;
};

Demo: http://plnkr.co/edit/IBvlqSaSd79p67ctQrIl?p=preview

edit: http://plnkr.co/edit/MvtAaftloGtgtfaUA6Eg?p=preview plnkr demo for the nested consult.

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

Comments

1

Did you happen to try angular.fromJson(data)?

I have this:

var parsedDashboard = angular.fromJson(data);

console.log(parsedDashboard);

Data is from an HTML response of json data.

The above works in Angular 1.4.6

In your case then it should be:

$scope.incidentes = angular.fromJson(your json data here)

Also try putting your ng-repeat on the tr instead of table its self:

<table st-table="displayedCollection" st-safe-src="customers" class="table   table-striped" id='customers'>
    <thead>
        <tr>
            <th st-sort="id">ID</th>
            <th st-sort="name">Name</th>
            <th st-sort="total">Total Ordered in {{searchObject.Duration}}</th>
        </tr>
    </thead>
    <tbody>
        <tr st-select-row="row" ng-repeat="x in displayedCollection" ng-click="setSelected(this)" class="{{selected}}">
            <td>{{ x.id }}</td>
            <td>{{ x.name }} </td>
            <td>{{ x.total | currency : '$' : 2 }} </td>
        </tr>
    </tboday>
    <tfoot>
        <tr>
            <td colspan="5" class="text-center">
                <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="displayedPages"></div>
            </td>
        </tr>
</table>
Improve this answer

7 Comments

It doesn´t make any difference, and I usually put the ng-repeat in the TR i switched it try some things coz nothing seems to work, I´m not sure if I´m invoking it wrong or if I should fix my angular.controller.
If you do "Console.log($scope.incidentes)" do you see your json values in there? I usually do plain http requests with get and post data. Also what about if you console.log(response) and see what all it is pulling in from there?
i.imgur.com/VIIIWgj.jpg Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 1 more… ] incidente.js:63:6
Shouldnt the json data be taken out of the array? If you set $scope.incidentes = $scope.incidented[0] then you would just have all the json data. That might be whats causing it.
According to angular documentation: link. I would also make sure that each object has a proper (key,value) pair.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.