Carregar um json externo dentro do meu controlador

[carlos alexandre gomes]

/*
Ola estou tentando carregar um arquivo json externo dentro do meu controlador, mas sem sucesso
este eo json externo
*/

[
  {"name":"Neptune", "distance":30.087, "light":"4 hours"},
  {"name":"Uranus", "distance":19.208, "light":"2 hours 40 minutes"},
  {"name":"Saturn", "distance":9.523, "light":"1 hour 20 minutes"},
  {"name":"Jupiter", "distance":5.203, "light":"43 minutes"},
  {"name":"Mars", "distance":1.524, "light":"12.6 minutes"},
  {"name":"Earth", "distance":1.0, "light":"0"},
  {"name":"Venus", "distance":0.723, "light":"6 minutes"},
  {"name":"Mercury", "distance":0.387, "light":"3 minutes"},
  {"name":"Moon", "distance":0.003, "light":"1.5sec"}
]

/*
este eo trecho do meu codigo
Não estou conseguindo passar o json recuperado no $http.get para minha variavel dados
Alguem poderia me ajudar a entender oque estou fazendo de errado
*/

.controller('MeuControle', function($scope, $http) {
               
    var Dados = $http.get("url_externa_do_arquivo_json")
    .then(function(response) {
        return response.data;
    });
   
    alert(Dados);
   
  })

[principe...@gmail.com]

liga o firebug ou as ferramentas de desenvolvedor do chrome pra ver o q eh, eles podem te dar uma dica, e ae dar um direcionamento

--
Você recebeu essa mensagem porque está inscrito no grupo "AngularJS BR" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para angularjs-br...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

[WagnerPV]

O get/promises em geral não funcionam assim.
Esqueça o retorno do HTTP get(ele é uma promise e não o response da requisicao)  e dentro da função then, faça dados=response.data

[carlos alexandre gomes]

Boa Tarde WagnerPV

Dentro da  função then eu consigo visualizar os dados do json, porem eu estava precisando manipular este json externo forma da função then, como eu posso fazer para manipular este json fora da função then, uma vez que eu carrego o json pelo $http.get ?


Obrigado

[carlos alexandre gomes]

Boa Tarde Igor,
Eu ate já debuguei, o problema é que não estou conseguindo manipaular o Json fora da função then uma vez que eu carrego o json externamente pelo $http.get
E eu estava precisando acessar este json retornado pelo $http.get  fora da função then tambem para poder usar em qualquer lugar dentro do meu controlador.

obrigado.


[Leidson Dias]

Vê se dá certo isso:

.controller('MeuControle', function($scope, $http) {

                
    var Dados;

$http.get("url_externa_do_arquivo_json")
    .success(function(response) {
        Dados = response.data;
    });
    
    alert(Dados);
    
  })

ou

.controller('MeuControle', function($scope, $http) {
                

$http.get("url_externa_do_arquivo_json")
    .success(function(response) {
        $scope.Dados = response.data;
    });
    
    alert($scope.Dados);
    
  })

--

Leidson Dias | http://leidsondias.com.br/

Graduado em Análise e Desenvolvimento de Sistemas - Estácio IDez

[principe...@gmail.com]

caraca, era isso q eu ia falar, a resposta do leidson

[carlos alexandre gomes]

Valeu pela ajuda Leidson,
Tentei das duas forma formas que você sugeriu mas ainda não consegui, so me retorna o valor da variavel como undefined.

[Leidson Dias]

Dá um console.log dentro da função de sucesso e ver o que retorna o response. Provavelmente ele não está caindo ai.

[Jhosef Marks]

Se você colocar essa url direto no navegador você consegue visualizar o json?

Att,

Jhosef Marks de Carvalho

Celular: (47) 9708-6420

skype: jhosef.marks
Twitter: @jhosefmarks

[carlos alexandre gomes]

Cara eu  pensei que isto seria mais facil, eu so queria simplesmente carregar um arquivo externo e manipular o mesmo dentro do controlador, como sou novo com Angular JS eu achei que teria algo como o .load() do jquery

[carlos alexandre gomes]

sim consigo, o arquivo esta no meu localhost.

[Leidson Dias]

Carlos e é extremamente fácil. Algum passo você está perdendo. Vê se esta caindo no success seu get

senao nunca irá de fato cair

[Gustavo Cruz]

Carlos, liga o painel de desenvolvedor do Chrome!

A dor de cabeça vai ser infinitamente maior pra tentar resolver isso com alert, console.log etc. Com certeza é algo besta que você deixou passar.

Nessas horas o browser é o seu melhor amigo!

[carlos alexandre gomes]

Leidson
Reinicie o servidor  e em seguida dei um "console.log($scope.Dados);"
ai me retornou uma mensagem "Requisição cross-origin bloqueada", não entendi muito bem oque aconteceu!
enviei um anexo par você ver

[Leidson Dias]

Problema de CORS é quando você tenta acessar um servidor no mesmo domínio mais com portas diferentes. Veja que você está em um servidor com porta 8100 tentando buscar o arquivo.json em um servidor de porta 80. 

Existem diversas formas de corrigir este problema de cors, um que eu utilizo é:

instalo o pacote https://www.npmjs.com/package/corsproxy do npm, inicio o mesmo e na sua aplicacão que está tentando requisitar o arquivo invés de acessar localhost acessa localhost:1337/localhost

[carlos alexandre gomes]

Gustavo eu debuguei com o Chrome, parece que utilizando o $http.get não estaconseguindo carregar o arquivo, sera que estou usando de forma errada o  $http.get

[Arthur Menezes]

tenta isso cara

var $scope.dados;
$http.get('v1/fotos')
                .success(function(retorno){
                        $scope.dados = retorno;
                })
                .error(function(error){
                        console.log(error);
                });

Qdo usa a função success o retorno já é o JSON diferentemente de quando chama then(function(retorno).... que ai vc tem que acessar o retorno.data para obter o JSON

[carlos alexandre gomes]

Gustavo debugei pelo Chrome, parece que não estou conseguindo mesmo acessar o local do arquivo, acho que não disse mas estou rodando esta aplicação com ionic + angular, o ionic esta rodando em : http://localhost:8100
e o arquivo json esta em http://localhost:80

Em quarta-feira, 4 de maio de 2016 17:45:44 UTC-3, Gustavo Cruz escreveu:

[Leidson Dias]

Carlos, leia o meu último email sobre problema de CORS. Nele está a solução

[carlos alexandre gomes]

Entedi Leidson ,
Acho que não falei mas esta aplicação esta rodando com ionic+ angular ai esta assim hoje :
a aplicação do ionic + angular JS esta rodando em http://localhost:8100/
eo arquivo json externo esta em  http://localhost:80
sera que instalando este pacote eu consigo resolver este problema?

[Leidson Dias]

Sim,

para saber mais caso se interesse. Leia sobre CORS ou problema de Cross Domain

[carlos alexandre gomes]

Leidson
instalei o pacote e na url do arquivo coloquei : http://localhost:1337/localhost:80/Arquivo.json, seria isto mesmo?
Com esta url  não consigo acessar o arquivo, oque estou fazendo errado?

[Leidson Dias]

Seria isso sim, testa retirando a porta :80 não é necessária.

Que status code deu?

Para isto funcionar, você tem que conseguir acessar esse arquivo via localhost/Arquivo.json , caso você não consiga então o erro está ao servir o arquivo.

[carlos alexandre gomes]

Artur, tentei tambem porem so me retorna o a mensagem undefined!

[William Thiago]

Chegou a executar o pacote?

Não apenas instalar...

Instala globalmente com:

npm install -g corsproxy

abre um console, e executa

corsproxy

Testa no browser se a url retorna: 

http://localhost:1337/localhost/Arquivo.json

depois usa isso no seu app.

[]s

William Thiago

--

[carlos alexandre gomes]

Ok, vou testar aqui e te falo!

[carlos alexandre gomes]

Boa noite William

Fiz aqui do jeito que você falou, e em relação a URL  http://localhost:1337/localhost/Arquivo.json

funcionou valeu!

Porem em relação ao meu script para retornar o JSON externo dentro do meu controle, continua retornando "undefined"

testei com estes scripts :

 var Dados;

$http.get("http://localhost:1337/localhost/Arquivo.json")

   .success(function(response) {

       Dados = response.data;

   });

 

   // alert(Dados);

   console.log(Dados);

//retornou undefined

$http.get("http://localhost:1337/localhost/Arquivo.json")

   .success(function(response) {

       $scope.Dados = response.data;

   });

 

    //alert($scope.Dados);

   console.log($scope.Dados);

//retornou undefined

$http.get("http://localhost:1337/localhost/Arquivo.json")

               .success(function(retorno){

                       $scope.dados = retorno;

               })

               .error(function(error){

                       console.log(error);

               });

   console.log($scope.dados);

//retornou undefined

Em quarta-feira, 4 de maio de 2016 18:47:17 UTC-3, William Thiago escreveu:

[Leidson Dias]

Verifica teu console se continua dando erro e põe console.log no response no callback da tua chamada

[William Thiago]

O problema é que no momento em que você está acessando a variável dados, ela não foi preenchida ainda, pois o processo do $http.get é assincrono.

O código que você escreveu é mais ou menos o seguinte: Você diz pra alguem calcular uma expressão complexa, que demora alguns segundos. E imediatamente já pergunta pro cara o resultado. Ele vai falar pra você: "não sei, não calculei ainda" :D

var dados;

$http.get(url).then(function(response) {

    dados = response.data;

    // aqui o dados foi preenchido

   console.log(dados);

});

// aqui dados ainda não foi preenchido

console.log(dados);

Em js puro, é possível fazer o que você quer (requisição get sincrona), mas eu não recomendo fortemente!!!

Com o angular (serviço $http), o parametro de assincronismo é hard-coded, então isso não é possível.

Me explica melhor o que você pretende fazer com esse "dados", que posso te indicar como mudar o código pra trabalhar de forma assincrona.

[]s

William Thiago

[principe...@gmail.com]

se o problema do cors foi resolvido, eu indicaria a criar uma funcao no scope do controller para, entao chamar o $http.get, e esta funcao receberia um callback, este chamado no success do $http

[principe...@gmail.com]

+/- isso

https://gist.github.com/IgorDePaula/148471c8a93b622240ce80b6667a35ed

[carlos alexandre gomes]

Bom dia Leidson

Fiz oque você sugeriu, dentro do $http.get funciona perfeitamente dei um console.log no response eos registros apareceram, porem quando tento passar o retorno do callback para uma variavel fora do $http.get ainda retorna como undefined

var Dados;

$http.get("http://localhost:1337/localhost:80/Arquivo.json")

    .success(function(response) {

        $scope.Dados = response.data;

console.log(response.data);

    });

    

    alert(Dados);

Enviei umas imagens em anexo

[principe...@gmail.com]

neste ultimo codigo vc esta enviando os dados recebidos variaveis diferentes: var Dados eh diferente de $scope.Dados

use um ou outro

[carlos alexandre gomes]

Bom dia Igor

Realmente estava errado, mas e porque eu estava testando de varias formas ai acabei postando com o código errado, mas ainda  sim usando o código abaixo continuo recebendo o valor da variável Dados fora do $http.get como undefined

var Dados;

$http.get("http://localhost:1337/localhost:80/Arquivo.json")

    .success(function(response) {

        Dados = response;

console.log(response);

    });

   console.log(Dados); 

[carlos alexandre gomes]

esqueci de falar que desta forma funciona  somente se eu usar o consle.log dentro da função de call back, se eu usar o console.log na variável Dados fora do $http.get só me retorna undefined

[carlos alexandre gomes]

Igor, testei aqui, valeu pela dica, mas parece que utilizando $scope não vai funcionar para manipular os dados dentro do meu controle, não sei ao certo a real utilização do $scope mas parece que ele e utilizado quando você  quer passar um retorno de um controle para a view

ex:

//controle

$scope.firstName = "John";
 $scope.lastName = "Doe";

//view

{{firstName}}
{{lastName}}

[principe...@gmail.com]

o $scope serve pra trabalhar com as variaveis de forma global dentro do controller onde foram definidas...

assim vc pode mudar o valor delas na view e usa-las no controller sem haver uma interacao direta entre eles

[carlos alexandre gomes]

entendi, eu tinha pensando que seu eu usasse um $scope tipo : $scope.firstName o firstName  obrigatoriamente teria que existir na minha View no ng-model, e no controle somente se se eu usasse ng-model="firstName" na View para receber os dados passados diretamente  pelo controlador, mas de qualquer forma, valeu pelo esclarecimento, não tem muito conhecimento em angular mas estou achando um pouco complicado de fazer esta tarefa de simplesmente carregar um arquivo externo e poder utilizar os dados em qualquer lugar do meu controlador

[Gustavo Cruz]

Carlos,

Pelo que estou vendo você ainda está engatinhando no angular. E é exatamente por ter essa limitação técnica que você está tendo tanta dificuldade em fazer algo extremamente simples. Sugiro dar uma estudada mais aprofundada, ver alguns vídeos, podcasts, tutoriais, etc. 

O angular não é, digamos, complicado. Mas não adianta você tentar comparar ele, por exemplo, com jQuery, que é algo que você já parece ter conhecimento e que tem uma curva de aprendizado menor. A mesma facilidade que você tem para fazer o que quer neste exemplo com jQuery, eu, hoje, tenho com angular....e de forma muito mais simplificada, bem estruturada, organizada e escalável.

$scope e ng-model, por exemplo, são uma das primeiras coisas que se aprende, isso é básico do básico.... sem conhecer bem a estrutura do framework e como ele funciona dificilmente você irá evoluir e conhecer o poder que ele tem.

No mais, qualquer dúvida é só postar que a gente te dá um help =)

[principe...@gmail.com]

o angular 1 tem um get started (tutorial para iniciante)  muito simples, bastando seguir o q esta la.

[Jhosef Marks]

Sugestão: https://www.youtube.com/user/rodrigobranas/playlists

Att,

Jhosef Marks de Carvalho

Celular: (47) 9708-6420

skype: jhosef.marks
Twitter: @jhosefmarks