Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

KleberGraciaSoares

Visualizar dados em json com angularjs

Por , em Javascript

Recommended Posts

KleberGraciaSoares    0

KleberGraciaSoares
Postado

Olá amigos tudo bem, estou fazendo uma aplicação para ler um json externo de um endereco mas é o seguinte, o exemplo local com um json simples ele funciona perfeitamente, ja com este json "http://imediato.gestaoconex.com/api/v1/news?page=1&limit=2" ele não visualiza nada, segue codigo. 

<!DOCTYPE  html>
<!--ng-app hace referencia al nombre de nuestro modulo-->
<html lang="es" ng-app="app">
	<head>
		<meta charset="UTF-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
		<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>		
			
		
    <script language="javascript" type="text/javascript">
		//para hacer uso de $resource debemos colocarlo al crear el modulo
		var app = angular.module("app", ["ngResource"]);
		 
		//con dataResource inyectamos la factoría
		app.controller("appController", function ($scope, $http, dataResource) {
			//hacemos uso de $http para obtener los datos del json
			$http.get('http://imediato.gestaoconex.com/api/v1/news?page=1&limit=2').success(function (data) {
				//Convert data to array.
				//datos lo tenemos disponible en la vista gracias a $scope
				$scope.datos = data;
			});
			//datosResource lo tenemos disponible en la vista gracias a $scope
			$scope.datosResource = dataResource.get();
		})
		 
		//de esta forma tan sencilla consumimos con $resource en AngularJS
		app.factory("dataResource", function ($resource) {
			return $resource("js/data.json", //la url donde queremos consumir
				{}, //aquí podemos pasar variables que queramos pasar a la consulta
				//a la función get le decimos el método, y, si es un array lo que devuelve
				//ponemos isArray en true
				{ get: { method: "GET", isArray: true }
			})
		})		
		
    </script>		
		
	</head>
	<body>
		<!--añadimos aquí el controlador appController ya que será donde mostremos los datos-->
		<div class="row" ng-controller="appController">
            <h1 class="subheader">+ Consumir um json com $http en AngularJS</h1>
            <ul class="panel callout radius">
                <li ng-repeat="data in datos">
                    <p>Id: {{ data.person.id }} Nome: {{ data.person.persontype }} Profesión: {{ data.profesion }}</p>
                </li>
            </ul>
 
            <h1 class="subheader">++ Consumir um json com resource em AngularJS</h1>
            <ul class="panel callout radius">
                <li ng-repeat="data in datosResource">
                    <p>Id: {{ data.id }} Nombre: {{ data.nombre }} Profesión: {{ data.profesion }}</p>
                </li>
            </ul>
		</div>
		<!--<script type="text/javascript" src="js/angular.js"></script>-->
        <script type="text/javascript" src="https://uno-de-piera.com/wp-content/uploads/2013/07/angular_resource.js"></script>
		<script type="text/javascript" src="https://uno-de-piera.com/wp-content/uploads/2013/06/angular.js"></script>
	</body>
</html>

Eu tentei fazer isso Nome: {{ data.person.persontype }} mas não exibe nada, gostaria de saber onde eu estou errando, grato.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A estrutura retornada do JSON é diferente.

Está assim:

 

data._embedded.news[0]._embedded.person.persontype
ai sim, o resultado é F.

Compartilhar este post

Link para o post
Compartilhar em outros sites

KleberGraciaSoares    0

KleberGraciaSoares
Postado

Bruno boa tarde amigo, fiz assim:

<ul class="panel callout radius">
                <li ng-repeat="data in datos">
                    <p>Id: {{ data._embedded.news[0]._embedded.person.persontype }} Nome: {{ data._embedded.news[0]._embedded.person.persontype }} Profissão: {{ data._embedded.news[0]._embedded.person.persontype }}</p>
                </li>
            </ul>

para testar e nada, seria isso mesmo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então, vc tá chamando no controller de: $scope.datos

 

Então seria:

 

{{ datos._embedded.news[0]._embedded.person.persontype }}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tem que ser datos, que vc chamou de datos lá no controller:

 

$scope.datos = data;
Vc pode mudar isso para qq coisa.

Só está percorrendo um, pq vc tem um array de news, e não um array de person.

 

Além disso, o teu repeat está na variável errada, ou seja, deveria ser em datos._embedded.news e não em datos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Veja:

 

<!DOCTYPE  html>
<!--ng-app hace referencia al nombre de nuestro modulo-->
<html lang="es" ng-app="app">
  <head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
    <script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://uno-de-piera.com/wp-content/uploads/2013/07/angular_resource.js"></script>
 
 
    <script type="text/javascript">
    var app = angular.module("app", ["ngResource"]);
 
    app.controller("appController", function ($scope, $http) {
      $http.get('http://imediato.gestaoconex.com/api/v1/news?page=1&limit=3').success(function (data) {
        $scope.newsList = data._embedded.news;
      });
    })
    </script>
 
  </head>
  <body>
    <div class="row" ng-controller="appController">
      <h1 class="subheader">+ Consumir um json com $http en AngularJS</h1>
      <ul class="panel callout radius">
          <li ng-repeat="news in newsList">
              <p>Id: {{ news.id }} Title: {{ news.title }} Imagem: {{ news.image }}</p>
          </li>
      </ul>
    </div>
 
  </body>
</html>
Como vc tem um array de NEWS e não de PERSONS, mudei o loop para percorrer as NEWS.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito