内部函数时,Json只返回最后一个元素

时间:2015-02-11 21:50:54

标签: javascript jquery json loops

我有一个代码从数据库中提取json,然后将其输出到地图上。

我遇到的问题是,当我在console.log中显示来自服务器的数据时,它显示了所有但是如果我在一个函数内而不是在“root”中的console.log它只显示json中的最后一个元素。我正在使用for (var i = 0; i < $data.length; i++))将每个json元素显示为“唯一”。

代码中的问题在于:

$( "#filter-gratis" ).click(function() {
                    console.log($geoJson[0].properties.place);
                    all.className = '';
                    this.className = 'active';
                    // The setFilter function takes a GeoJSON feature object
                    // and returns true to show it or false to hide it.
                    console.log("works");
                    $myLayer.setFilter(function(f) {
                        return f.properties['male'] < '1';
                    });
                    return false;
                });

如果我在点击内部console.log($geoJson[0].properties.place);,它只显示json中的最后一个元素。但是,如果我在外面做,(在它上面)就行了。

这是我的代码:

       $.ajax({     
            url: 'http://hotell.difi.no/api/json/bergen/dokart?',     
            dataType: 'json',     
            async: false,
            success: processJSON 
        });


        function processJSON(data) {
            $data = data.entries;

            for (var i = 0; i < $data.length; i++) {


                // Endre "null" til 0 og de som har pris med "kr"
                if($data[i].pris == "NULL"){
                    $data[i].pris = "GRATIS";
                }else if($data[i].pris >= 0){
                    $data[i].pris = $data[i].pris + "kr";
                }

                // Om den er stengt i helgen
                if($data[i].tid_lordag == "NULL"){
                    $data[i].tid_lordag = "Stengt";
                }
                if($data[i].tid_sondag == "NULL"){
                    $data[i].tid_sondag = "Stengt";
                }

                // Om den er åpen
                if($data[i].tid_hverdag == "ALL" && $data[i].tid_lordag == "ALL" && $data[i].tid_sondag == "ALL"){
                    $data[i].tid_hverdag = "Alltid åpen"
                    $data[i].tid_lordag = []
                    $data[i].tid_sondag = []
                }




                $myLayer = L.mapbox.featureLayer().addTo($map);

                var id = $data[i].adresse;
                $geoJson = [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [$data[i].longitude, $data[i].latitude]
                    },
                    "properties": {
                        "title": ['<h1>'+$data[i].plassering+'</h1>'],
                        "place": ['<span>'+ $data[i].adresse +'</span>'],
                        "price": ['<div class="info">'+'<i class="icon ion-cash"></i>'+'<p id="price">'+$data[i].pris+'</p>'],
                        "week": ['<p>'+$data[i].tid_hverdag+'</p>'],
                        "sat": ['<p style="color: red;">'+$data[i].tid_lordag+'</p>'],
                        "sun": ['<p style="color: red;">'+$data[i].tid_sondag+'</p>'],
                        "female": ['<img src="img/wc_female.png"/>'],
                        "male": ['<img src="img/wc_male.png"/>'],
                        "disabled": ['<img src="img/wc_hc.png"/>'],
                        "nursery": ['<img src="img/wc_stell.png"/>'],
                        "image": ['<img src="img/350x150.gif"/>'],
                        "icon": {
                            "iconUrl": ["img/markers/offices/interior/toilets.png"],
                            "iconSize": [25, 30], // size of the icon
                            "iconAnchor": [15, 15], // point of the icon which will correspond to marker's location
                            "popupAnchor": [-2, -15], // point from which the popup should open relative to the iconAnchor
                            "className": "dot"
                        }
                    }

                }];

                // Hvem som kan bruke toalettet
                    if($data[i].rullestol == "NULL"){
                        $geoJson[0].properties.disabled = [];
                    }
                    if($data[i].stellerom == "NULL") {
                        $geoJson[0].properties.nursery = [];
                    }
                    if($data[i].pissoir_only == "1") {
                        $geoJson[0].properties.disabled = [];
                        $geoJson[0].properties.nursery = [];
                        $geoJson[0].properties.female = [];
                    }

                // Om [tid.hverdag] har masse tekst (at alt står der) så gjemmer vi lørdag og søndag + tar mindre margin så alt ser bra ut!
                    if($data[i].tid_hverdag.length > 20){
                        $geoJson[0].properties.price = ['<div style="margin-right: 1%;" class="info">'+'<i class="icon ion-cash"></i>'+'<p id="price">'+$data[i].pris+'</p>']
                        $geoJson[0].properties.sat = []
                        $geoJson[0].properties.sun = []
                    }


                // Set a custom icon on each marker based on feature properties.
                $myLayer.on('layeradd', function(e) {


                    //console.log($geoJson[0].properties.place);
                $( "#filter-gratis" ).click(function() {
                    console.log($geoJson[0].properties.place);
                    all.className = '';
                    this.className = 'active';
                    // The setFilter function takes a GeoJSON feature object
                    // and returns true to show it or false to hide it.
                    console.log("works");
                    $myLayer.setFilter(function(f) {
                        return f.properties['male'] < '1';
                    });
                    return false;
                });

                $( "#filter-all" ).click(function() {
                    gratis.className = '';
                    this.className = 'active';
                    $myLayer.setFilter(function(f) {
                        // Returning true for all markers shows everything.
                        return true;
                    });
                    return false;
                });



                    var marker = e.layer,
                        feature = marker.feature;


                    var popupContent = feature.properties.title + feature.properties.place + feature.properties.image +'<div id="info">'+ feature.properties.price+'</div>'+'<div class="info">'+'<i class="icon ion-clock"></i>'+ feature.properties.week +'<br>'+feature.properties.sat+'<br>'+feature.properties.sun +'</div>'+'<div>'+feature.properties.female+feature.properties.male+feature.properties.disabled+feature.properties.nursery+'</div>';




                    // http://leafletjs.com/reference.html#popup
                    marker.bindPopup(popupContent,{
                        closeButton: false,
                        minWidth: 210
                    });

                    marker.setIcon(L.icon(feature.properties.icon));
                });

                // Add features to the map.

                $myLayer.setGeoJSON($geoJson);
                //console.log($geoJson[0].properties.place);
                //console.log($myLayer._geojson[0].properties.nursery);



            }

            }
            `

有什么建议吗? 谢谢!

0 个答案:

没有答案