[英]Angular getting Json Values
您好,我在使用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>
據此,它應該反映出價值,但我沒有嘗試過我能想到的每個說服力。
繼承人的角度文件:
.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;
};
UDPDATE:“現在,我可以從JSON數組中獲取值,但似乎無法找出使用NG-repeat顯示em的方法。
**編輯:我在代碼中為可能需要此解決方案的任何人添加了該解決方案的示例,以及在數組中的對象內部獲取對象的功能。
<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>
您是否碰巧嘗試了angular.fromJson(data)?
我有這個:
var parsedDashboard = angular.fromJson(data);
console.log(parsedDashboard);
數據來自json數據的HTML響應。
以上工作在Angular 1.4.6中
在您的情況下,則應為:
$scope.incidentes = angular.fromJson(your json data here)
另外,嘗試將ng-repeat放在tr上,而不要列出其自身:
<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>
如果您的數據以數組的形式出現,那么就足夠了:
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演示用於嵌套咨詢。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.