javascript - Angular 获取 Json 值

Question

您好，我在使用 Angular JS 调用 Json 数组的值时遇到问题。

这是 JSON 数组(已更新):

    "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": "lsarafian@snr.gob.ar",
        "interno": "5224"
      }
    }]

这是我用来显示数据的 HTML 页面。 (已更新)

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

据此，它应该反射(reflect)值(value)观，但事实并非如此，我尝试了我能想到的每一个说服......

这是 Angular 文件:

  .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:“我现在可以从 JSON 数组中获取值，但似乎无法找出使用 NG-repeat 来显示它们的方法。

**编辑:我在代码中为可能需要它的任何人添加了一个解决方案示例，以及在数组中的对象内获取对象的函数。

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

Answer 1

如果您的数据以数组形式出现，这应该足够了:

var onIncidenteComplete = function(response) {

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

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

编辑:http://plnkr.co/edit/MvtAaftloGtgtfaUA6Eg?p=preview用于嵌套咨询的 plnkr 演示。