[javascript] een object afvangen nadat deze is gerturned

[maxtz0r]

Hallo,

Ik ben bezig met wat javascript en loop tegen een issue. Door middel van Json haal ik een array op met daarin een hoop informatie. Wanneer ik 1 record uit deze array wil halen gebruik ik de $.each gevolgd met een if, zie code hieronder.

JavaScript:

        function getinfo(p) {
            $.getJSON('/jsonpagina.aspx', function(Data) {
                $.each(Data.subdata, function(i, obj) {

                    if (obj.id === p) {
                        var object = obj;
                            return object;
                    }
                });
            });

        }

Ik return nu het volledige object en hoop die uit de kunnen lezen door:

code:

var hello = getinfo(p);

Hello is nu echter altijd undefined dus ik heb het idee dat de manier waarop ik het object probeer te retourneren niet mogelijk is. Kan iemand mij opweg helpen? Ik heb wel dingen gevonden als: http://stackoverflow.com/...ction-returning-an-object
maar mijn object is toch al gevuld waarom kan ik deze dan niet helemaal mee sturen?

[Verwijderd]

JSON request is natuurlijk asynchroon.

[ Voor 95% gewijzigd door Verwijderd op 24-05-2013 14:56 ]

[Sleepkever]

Die stackoverflow die je gelinked hebt staat totaal lost van jou probleem.

Wat je even in de gaten moet houden is dat getJSON op de achtergrond gewoon een AJAX call is, oftewel, Asynchronous JavaScript and XML. Dit houdt in dat de functie asynchroon op de achtergrond gestart zal worden, en de mee gegeven functie aan zal roepen als hij klaar is.

De getInfo functie zelf doet alleen maar deze request starten, en daarna returnen. En aangezien getinfo geen return bevat zal hij dus altijd return terug geven. Iets returnen in de anonieme functie die je in getJSON mee geeft komt dus uiteindelijk uit ergens in de getJSON functie van jQuery. Iets waar je zelf niets aan hebt.

[ZeroXT]

Dat komt omdat je een functie binnen een functie hebt die iets returned. Voorbeeld:

JavaScript:

function func()
{
    return function innerfunc()
    {
        return 'test';
    }
}

console.log(func());

[Grijze Vos]

Als je dit weg wilt stoppen in een functie kun je het beste je method in een deferred wrappen:

JavaScript:

        function getinfo(p) {
            var deferred = $.Deferred();
            $.getJSON('/jsonpagina.aspx', function(Data) {
                $.each(Data.subdata, function(i, obj) {

                    if (obj.id === p) {
                        deferred.resolve(obj);
                        return false; // break out of loop
                    }
                });

                deferred.reject(); // item niet gevonden
            }).fail(function() {
                deferred.reject();
            });
            return deferred;
        }

getinfo(foo)
  .done( function( item ) {
     // doe iets met item
  })
  .fail( function() {
     // ophalen mislukt, doe iets leuks.
  });

Je kunt er ook voor kiezen om direct de callbacks te gebruiken, maar uit ervaring weet ik dat zodra alles wat complexer wordt je vast zit in een web van callbacks waar je niet blij van wordt.

[maxtz0r]

Thanks Grijze Vos dat was exact wat ik zocht. Het werkt nu zoals ik wil en ziet er een stuk netter uit :-)

[Verwijderd]

$.getJSON() returnt zelf trouwens ook een object met een Promise interface:

JavaScript:

function getinfo(p) { 
    return $.getJSON('/jsonpagina.aspx');
} 

getinfo(foo) 
    .done( function( json ) { 
        // doe iets met item 
    }) 
    .fail( function() { 
        // ophalen mislukt, doe iets leuks. 
    });

[Grijze Vos]

dan is het nog makkelijker te doen (ik gebruik getjson nooit ):

JavaScript:

function getInfo(p) { 
    return $
        .getJSON( foo )
        .pipe( function ( data ) {

             var ret = null;

             $.each(data.subdata, function(i, obj) { 

                      if (obj.id === p) { 
                          ret = obj;
                          return false;
                      } 
             }); 
             return ret;
         });
}

[maxtz0r]

Bedankt voor jullie antwoorden, ondertussen is het helemaal gelukt om de informatie te tonen die ik wil.

Als ik mijn code nu evalueer dan heb ik het idee dat ik niet heel efficiënt te werk ga. Mijn json resultaat bestaat uit twee objecten die ieder een variabel aantal array's bevat. De twee objecten zijn players en rooms. Er zitten meerdere referenties tussen beide objecten. Players heeft bijvoorbeeld een referentie naar rooms op basis van roomid. Op die manier kan ik dus alle players die in een specifieke room zitten tonen. Op dit moment doe ik dat door opnieuw een json call te doen waarbij ik de room id meegeef en door de players object ga.

Mijn vermoeden is dat dit niet heel slim is en dat het mogelijk is allemaal in 1 getJSON te doen maar ik kom er niet uit. Hoe zou ik bijvoorbeeld alle spelers in een specifieke room uit mijn json resultaat kunnen halen. Mijn json resultaat ziet er als volgt uit:

code:

{
"players":
[{
"a": 1,
"b": 2,
"etc": etc,
"room": 12
}],
"rooms":
[{
"id": 12,
"a": 1,
"b": 2,
"etc": etc
}}]}

[jurrie]

Als je alle spelers uit je json-object wilt halen, op basis van wat je gepost hebt, zou dat ong als volgt kunnen (ongetest):

JavaScript:

function getPlayersInRoom(room, playersObj) {
    var players = [];
    
    $.each(playersObj, function(idx, val) {
        if ('room' in val && val.room == room) {
            players.push(val);
        }
    });
    
    return players;
}

var jsonObj = getinfo(...);
var room12Players = getPlayersInRoom(12, jsonObj.players);

[R4gnax]

jurrie schreef op dinsdag 11 juni 2013 @ 13:16:
Als je alle spelers uit je json-object wilt halen, op basis van wat je gepost hebt, zou dat ong als volgt kunnen (ongetest):

JavaScript:

function getPlayersInRoom(room, playersObj) {
    var players = [];
    
    $.each(playersObj, function(idx, val) {
        if ('room' in val && val.room == room) {
            players.push(val);
        }
    });
    
    return players;
}

var jsonObj = getinfo(...);
var room12Players = getPlayersInRoom(12, jsonObj.players);

Doe dan iets als

JavaScript:

function getPlayersInRoom( players, room ) {

  return $.grep( players, function( player ) {
    return player.room === room;
  });
}

Of als je geen jQuery gebruikt maar gewoon vanilla JS (en maling hebt aan IE8 en lager)

JavaScript:

function getPlayersInRoom( players, room ) {

  return players.filter( function( player ) {
    return player.room === room;
  });
}