JSON output to AngularJs

Question

I´m having trouble formatting and showing (using AngularJS) a JSON output. This is the JSON output which is generated through a java springboot app:

[
    {
        "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
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 20
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 21
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 22
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 1
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 2
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 3
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 4
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 5
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 6
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 7
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 8
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 9
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 10
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 11
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 12
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 13
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 14
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 15
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 16
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 17
                }
            },
            {
                "id": {
                    "incidenteid": 1,
                    "sistemaid": 18
                }
            }
        ],
        "softwares": [],
        "tecnico": {
            "id": 4,
            "nombre": "Lucas Ignacio Sarafian",
            "legajo": "400450",
            "email": "[email protected]",
            "interno": "5224"
        }
    }
]

This is the table I'm showing the data on:

<!doctype html>
<html ng-app="incidente">
<head>
<title>Incidentes SNR</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  
<!-- Angular -->
<script data-require="[email protected]" data-semver="1.3.0-beta.5"
    src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>

<!-- Incidente -->
<script src="js/incidente.js"></script>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
  
</head>
<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>
                    </tr>
                </thead>
                <tbody ng-repeat="incidente in incidentes">
                    <tr class="">
                        <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 ng-repeat="sistema in incidentes">{{sistema.id.sistemaid}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

I'm not sure how to show the all the "sistemas".

Formatted json for easier reading

Bruce P
– Bruce P

2015-11-06 19:20:52 +00:00
Commented Nov 6, 2015 at 19:20 — Bruce P
– Bruce P, Commented Nov 6, 2015 at 19:20

MohammadJavad Seyyedi · Accepted Answer · 2015-11-04 19:09:50Z

1

at first you should parse this JSON file:

var onIncidenteComplete = function(response) {
    $scope.incidentes = JSON.parse(response.data);
};
$scope.sistemas = $scope.incidentes.sistemas;

and then in your html File you should have

<div ng-repeat="system in sistemas"> 
        {{system.(whatever you want)}};
</div>

edited Nov 4, 2015 at 19:09

answered Nov 4, 2015 at 18:37

MohammadJavad Seyyedi

6847 silver badges21 bronze badges

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

5 Comments

r007 Over a year ago

Heres my angularjs file with the controller and the get method, not sure how to add the afterParse... pastebin.com/raw.php?i=rVtv60Wh

r007 Over a year ago

Este es el controller for the page: pastebin.com/raw.php?i=E9esA2fd it gets the output of the java api. pastebin.com/raw.php?i=aVUKBzaj

MohammadJavad Seyyedi Over a year ago

I updated the answer , if you had error on $scope.incidentes.sistemas; , please show me your data after parse

r007 Over a year ago

The table is no longer filling I cant get the values while using the JSON.parse. Dunno how to see the output of the parse.

MohammadJavad Seyyedi Over a year ago

the result after parsing which is in $scope.incidentes is your out put. you should divide the object array inside this variable which you need , and then show it in HTML using ng repeat as I showed to U

Collectives™ on Stack Overflow

JSON output to AngularJs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related