AngularJS / Problème d'utilisation donnée obtenues en GET

Par notPH, il y a 10 ans

Javascript

Bonjour,

Je rencontre en ce moment un soucis pour utiliser des données obtenu en GET pour les "injecter" dans un script avec AngularJS afin de les afficher sur une carte.

.controller('MapCtrl', function ($scope, $filter, $http) { $scope.map_data = {}; $http.get('http://localhost:81/SNIP_manager/www/api/v1/map_data').then(function(data){ $scope.map_data = data.data; }); ...

ce qui, si je fais un {{map_data}} me retourne

[ {"name":"Point 1","lat":45,"lon":-10}, {"name":"Point 2","lat":50,"lon":-5}, {"name":"Point 3","lat":40,"lon":-20}, {"name":"Pt 4","lat":55,"lon":-10}, {"name":"Point 5","lat":35,"lon":-15} ]

Or il semblerai que le seul code pris en compte par le script soit de la forme:

// Exemple data var markGB = [ { name: 'London', lat: 51.505, lon: -0.09 }, { name: 'Bath', lat: 51.375, lon: -2.35 } ];

avec des guillemets autour des valeurs de name (ex: 'London') et uniquement la valeur pour les coordonnées (ex: 51)

Je débute encore et je n'arrive pas à trouver un moyen de passer de l'un à l'autre.

Auriez vous une idée?

Merci

20 réponses

keulu, il y a 10 ans

bah la je voit pas spécialement de difference entre les 2.

Un objet JS peut etre ecrit des 2 facons... { "name" : "London" } ou { name : 'London' } c'est pareil :)

la ton map_data c'est un tableau qui contiens des objets et markGB aussi... donc la, tu doit avoir un autre soucis je pense...

essaye peut etre d'initialiser ton map_data comme ca : $scope.map_data = [];

AH !!!! et surtout, dans ton success, tu fait
scope.map_data = data.data;
au lieu de
$scope.map_data = data.data;

notPH, il y a 10 ans

keulu, petite erreur de ma part lors du post sur le forum, il y a bien $scope.map_data = data.data; dans le script.
Si j'essaye de transformer manuellement le dernier tableau en mettant des guillemets partout ça ne marche plus. Je ne sais pas pourquoi non plus.

hum j'ai beau essayer ce que tu propose j'ai toujours rien, {{markGB}} ne donne rien non plus.
Il ne trouve pas la fonction map_data, j'ai mis $scope.map_data à la place, plus d'erreur mais pas de résultat.

J'ai fait une petite erreur dans le script de l'api, maintenant ça donne un tableau comme ça:

{"data":[ {"id":1,"name":"Point 1","lat":45,"lon":-10}, {"id":2,"name":"Point 2","lat":50,"lon":-5}, {"id":3,"name":"Point 3","lat":40,"lon":-20}, {"id":951,"name":"Pt 4","lat":55,"lon":-10}, {"id":952,"name":"Point 5","lat":35,"lon":-15} ]}

Autre chose, lorsque j'ai essayer de transformer l'array

// Exemple data var markGB = [ { name: 'London', lat: 51.505, lon: -0.09 } ];

en

// Exemple data var markGB = [ { "name": "London", "lat": "51.505", "lon": "-0.09" } ];

La position du marqueur devient fausse, et se place dans l'hémisphère sud, par 90-51.505 soit ~40°S, visiblement ce script (Openlayers for Angulars) a "besoin" d'un certain affichage pour fonctionner.

Mais ça c'est surement un soucis avec le script en lui même.

keulu, il y a 10 ans

alors...

Si je me base sur cet exemple : view-source:http://tombatossals.github.io/angular-openlayers-directive/examples/061-markers-add-remove-example.html

voila comment je ferai : (je vais essayer de mixer les 2 et attention, je fait ca à la volé sans tester)

var app = angular.module("demoapp", ["openlayers-directive"]); // default markers var markers = [ { name: 'London', lat: 51.505, lon: -0.09 }, { name: 'Bath', lat: 51.375, lon: -2.35 }, { name: 'Canterbury', lat: 51.267, lon: 1.083 } ]; app.controller("DemoController", [ '$scope', '$http', function($scope, $http) { angular.extend($scope, { center: { lat: 51.505, lon: -0.09, zoom: 7 }, markers: markers }); $http.get('http://localhost:81/SNIP_manager/www/api/v1/map_data').then(function(data){ $scope.markers = data.data; }); } ]);

et dans ta vue html, tu fait ca

<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%"> <ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon"></ol-marker> </openlayers>
notPH, il y a 10 ans

data.data ne passe pas non plus, j'ai refait un $scope.map_data.
Si je fais {{$scope.markGB}} j'obtiens

} } } }

et avec un consol.log sur $scope.markGB j'obtiens un object 'undefiened' pour tous les champs.

console.log ($scope.map_data); lui, donne bien l'array.

Voici mon code actuellement (ça pourrait peut être permettre de trouver ce que je fais de mal)

.controller('MapCtrl', function ($scope, $filter, $http) { $scope.map_data = []; $http.get('http://localhost:81/SNIP_manager/www/api/v1/map_data2').then(function(data){ $scope.map_data = data.data; // console.log ($scope.map_data); $scope.markGB = [] // on déclare le tableau vide // console.log ($scope.markGB); angular.forEach($scope.map_data, function (value, key) { var currentElem = {name: value.name, lat: value.lat, lon: value.lon}; // On fait un objet suivant ton exemple $scope.markGB.push(currentElem); // On l'ajoute au tableau markGB console.log ($scope.markGB); }); });
keulu, il y a 10 ans

mais t'as vu dans le HTML comment c'est fait ?

il faut pas oublier ca

<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%"> <ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon"></ol-marker> </openlayers>

en fait markeGB on s'en fiche nan ?

je vais essayer de reprendre ton code proprement :)

MapCtrl.js

controller('MapCtrl', function ($scope, $filter, $http) { // init des vars par defaut $scope.markers = []; $scope.center = { lat: 51.505, lon: -0.09, zoom: 7 }; $http.get('http://localhost:81/SNIP_manager/www/api/v1/map_data2').then(function(data){ $scope.markers = data.data; });

index.html

<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%"> <ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon"></ol-marker> </openlayers>

le ol-center va prendre ton object $scope.center
le ol-markers va prendre ton tableau de markers

et ensuite un ng-repeat pour chacun de tes markers avec la latitude et la longitude

notPH, il y a 10 ans

Merci à vous deux de prendre ce temps pour m'aider :)

keulu, j'avoue que c'est devenu un peu le fouilli ces derniers temps... en fait le markGB, c'était parceque j'avais prévu de pouvoir filtrer les données à afficher par un toogle. Mais il semblerai que la même chose en jouant sur des layers serait plus adapté. Enfin je verrai ça plus tard.

toujours vide, malgré le changement :/

J'ai essayé de modifier mon code et aussi de reprendre quelque chose de propre avec ce que propose keulu, mais vide, toujours vide dans les deux cas ...

EDIT/ Je précise au cas où que la map s'affiche bien, le pb vient juste des markers.

keulu, il y a 10 ans

alors déjà, c'est plus clair si tu dit .then(response) plutot que .then(data) parce que then te retourne une reponse et response.data les données.

est ce qu tu peux faire un console.log(reponse) et un console.log(reponse.data) dans ton .then() et nous donner les 2 retours ?

notPH, il y a 10 ans

Je refait un projet à partir de 0 pour repartir de quelque chose de vraiment propre et j'essaye ce que tu propose :)

notPH, il y a 10 ans

Voilà ce que ça me donne

La première partie du script à l'air Ok, il semble que c'est ce qui se passe ensuite qu'il y a un soucis?

Pour ton lien keulu, je l'avais déjà vu. Il se base simplement sur un toogle entre un var abc = [content...] et un var abc = [];
Et comme il n'y a qu'un seul "marker" affichable, j'avais fait un truc, un peu barbare probablement, qui consistait en plusieurs var markGB, markSea, mark.... que je concatène. Ca marche pas mal en soit mais je pense qu'il y a mieux à faire.

EDIT/ Bon ça avance un peu.
Avec

var log = []; angular.forEach(response.data.data[0], function(value, key) { console.log(key + ': ' + value); });

J'obtiens ça dans la console.
app.js:109 id: 1
app.js:109 name: Point 1
app.js:109 lat: 45
app.js:109 lon: -10

EDIT 2/

Il semblerai que le code

{name: value.name, lat: value.lat, lon: value.lon}

pose soucis.

[key + ': ' + value]

fonctionne quand à lui mais ne permet pas encore de faire ce dont j'ai besoin.

keulu, il y a 10 ans

donc effectivement

ligne: 103 ca correspond a reponse.data
ligne: 104 ca correspond a response ?

donc ton tableau a envoyer a openlayers est dans "response.data.data"

et oui mon lien joue sur le toggle de markers, mais il y en a 3.
c'est surtout qu'il faut que tu regarde comment ils ont fait coté JS ET coté HTML

EDIT :

La tu demande a boucler sur le premier element de ton tableau (qui es un objet)

fait un angular.forEach(response.data.data) tu va boucler sur ton tableau

keulu, il y a 10 ans

moi quand je fait ca

$scope.data = {"data":[ {"id":1,"name":"Point 1","lat":45,"lon":-10}, {"id":2,"name":"Point 2","lat":50,"lon":-5}, {"id":3,"name":"Point 3","lat":40,"lon":-20}, {"id":951,"name":"Pt 4","lat":55,"lon":-10}, {"id":952,"name":"Point 5","lat":35,"lon":-15} ]}; angular.forEach($scope.data.data, function(value, key) { console.log(value); });

ca foncitonne nickel, j'ai ca en log

Object {id: 1, name: "Point 1", lat: 45, lon: -10} Object {id: 2, name: "Point 2", lat: 50, lon: -5} Object {id: 3, name: "Point 3", lat: 40, lon: -20} Object {id: 951, name: "Pt 4", lat: 55, lon: -10} Object {id: 952, name: "Point 5", lat: 35, lon: -15}
keulu, il y a 10 ans

et si je fait ca :

$scope.data = {"data":[ {"id":1,"name":"Point 1","lat":45,"lon":-10}, {"id":2,"name":"Point 2","lat":50,"lon":-5}, {"id":3,"name":"Point 3","lat":40,"lon":-20}, {"id":951,"name":"Pt 4","lat":55,"lon":-10}, {"id":952,"name":"Point 5","lat":35,"lon":-15} ]}; $scope.data2 = []; angular.forEach($scope.data.data, function(value, key) { var tmp = {name: value.name, lon: value.lon, lat: value.lat}; $scope.data2.push(tmp); }); console.log($scope.data2);

et mon console log m'affiche bien ca

[Object, Object, Object, Object, Object] 0: Object lat: 45 lon: -10 name: "Point 1" Object1: Object2: Object3: Object4:
notPH, il y a 10 ans

C'est bien ça pour les lignes.

J'ai un dernier soucis - j'espère - qui est un problème de ReferenceError: $scope_process is not defined

Mon code:

angular.forEach(response.data.data, function (value, key) { var processed_data = {}; var processed_data = {name: value.name, lat: value.lat, lon: value.lon}; // On fait un objet suivant ton exemple $scope_process = processed_data; });

Je n'arrive pas à "sortir" le $scope_process pour le réutiliser ailleurs

keulu, il y a 10 ans

ben.... $scope_process c'est different de $scope.process... ^^

keulu, il y a 10 ans

fait plutot ca

$scope.processed_data = []; angular.forEach($scope.data.data, function(value, key) { var tmp = {name: value.name, lon: value.lon, lat: value.lat}; $scope.processed_data.push(tmp); }); console.log($scope.processed_data);

et du coup, tu peux recupérer ton tableau dans ton html en faisant ca {{processed_data}}

notPH, il y a 10 ans

Bon, on va y arriver :)

Si je tapais le bon code ça serait plus simple ;)

Alors tout semble bon sauf que... les markers ne s'affichent pas. Va savoir pourquoi.

Je vais faire une pause et m'aérer l'esprit. Je re-regarderai ça un peu plus tard. :)

keulu, il y a 10 ans

fait péter ton code html après :)

notPH, il y a 10 ans

Je l'ai mis sur JSFiddle.
http://jsfiddle.net/vxsLvfw2/

Si besoin, si tu décommente la ligne

// Definir la var markers. var markers = $scope.processed_data; //var markers = [{id: 14, name: 'Sea1', lat: 51.505, lon: -20}];

Tu aura un marqueur qui s'affiche bien avec une syntaxe ok.

EDIT/

Si je met des [] comme ici : var markers = [$scope.processed_data];
J'ai bien un point mais pas au bon endroit... Un marqueur en position 0°N,0°E soit vers Sainte Helene dans l'Atlantique Sud
http://jsfiddle.net/vxsLvfw2/2/

notPH, il y a 10 ans

Résolu :)

Je fermais visiblement la function(response) trop tôt. :)

Merci pour votre aide à tous les deux.