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

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;

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.

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>

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);
 });
});

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

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.

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 ?

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

base toi sur des examples :)

http://tombatossals.github.io/angular-openlayers-directive/examples/061-markers-add-remove-example.html

regarde le code source de cette page :)

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.

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

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}

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: 

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

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

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. :)

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

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/

Résolu :)

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

Merci pour votre aide à tous les deux.