[JQuery] Laagste key waarde van een array

[Fusioxan]

Goeden middag,

Op deze laatste zomervakantie-woensdag-middag ben ik nog even flink aan het brainstormen over iets. Ik moet de laagste key-waarde van een array te komen weten in jQuery. Simpel, Math.min(null, array);. Was dat maar.

Ik laat een array in php doorgeven via json naar jQuery. Je moet je er zoiets van bij voorstellen:

PHP:

for($i=1;$i<=50;$i++)
{
$array['info'][$i]['naam'] = 'foo';
$array['info'][$i]['foto'] = 'bar';
}

Via Json importeer ik ze naar m'n javascript-script. Hierin moet ik te weten komen welk nummer het laagste is, om daarna het laagste te vervangen door het nieuwste. (Ik heb niet exact hetzelfde als hierboven, hij werkt namelijk met timestamps). Alleen, als ik dus Math.min gebruik, krijg ik als return NaN. Hier ben ik echt helemaal de weg kwijt. Google wist het ook niet helaas. Hebben jullie tips?

[RobIII]

Ik ken geen specifieke jQuery manier (daarvoor is m'n jQuery kennis te oppervlakkig) maar wat is er mis met een ouderwetsche functie die even de array itereert en de laagste key returned

[OkkE]

Zomaar een idee-tje: Het geheel al in PHP sorteren zodat de eerste (array[0]) de laagste is?

[Fusioxan]

RobIII schreef op woensdag 24 augustus 2011 @ 15:59:
Ik ken geen specifieke jQuery manier (daarvoor is m'n jQuery kennis te oppervlakkig) maar wat is er mis met een ouderwetsche functie die even de array itereert en de laagste key returned

Hmm, ik denk dat je de phpfunctio min($array) bedoelt. Helaas is dat niet mogelijk, omdat het zonder te refreshen moet.

Het grootste probleem is denk ik dat de id's veranderd moeten worden van de div's. Door middel van het laagste cijfer in de array, kan ik achter het id van de div komen, waardoor ik dus de html kan veranderen. Het enigste waar ik constant in vast loop is het achterhalen van de laagste timestamp (tja, mktime...). Ik wil best wel iemand de originele broncode laten zien, want ik kom er nog niet uit.

OkkE schreef op woensdag 24 augustus 2011 @ 16:12:
Zomaar een idee-tje: Het geheel al in PHP sorteren zodat de eerste (array\[0]) de laagste is?

Dat is al het geval. Maar omdat de key de timestamp, kan ik niet gewoon $array['info'][0] gebruiken. Maar ik zit nu na te denken als ik hem niet als key gebruik dat het misschien wel mogelijk is. Even uittekenen, bedankt!

Helaas is het nog niet opgelost, maar we hebben de goede afslag genomen.

[RomeoJ]

Ik zie dat je wel met Math.min aan de gang bent gegaan, maar heb je dit ook op deze manier geimplementeerd?

JavaScript:

$(document).ready(function(){
    // Function to get the Max value in Array
    Array.max = function( array ){
        return Math.max.apply( Math, array );
    };

    // Function to get the Min value in Array
    Array.min = function( array ){
       return Math.min.apply( Math, array );
    };

    //updated as per Sime Vidas comment.
    var widths= $('img').map(function() {
        return $(this).width();
    }).get();

    alert("Max Width: " + Array.max(widths));
    alert("Min Width: " + Array.min(widths));
});

Bron: StackOverflow

[Fusioxan]

RomeoJ, op StackOverflow had ik het ook al gezien. Maar hij doet het dan nog steeds niet (logisch, want je gebruikt gewoon een omweg (aparte functie) om erachter te komen.

[RobIII]

Fusioxan schreef op woensdag 24 augustus 2011 @ 16:15:
[...]


Hmm, ik denk dat je de phpfunctio min($array) bedoelt. Helaas is dat niet mogelijk, omdat het zonder te refreshen moet.

Nee, ik doel op een (handgeschreven, eigengemaakte, call-it-what-you-like) JS functie.
Als je server-side de sortering al kunt uitvoeren zou ik daar eerst voor gaan natuurlijk.

[OkkE]

Fusioxan schreef op woensdag 24 augustus 2011 @ 16:15:
Dat is al het geval. Maar omdat de key de timestamp, kan ik niet gewoon $array['info']\[0] gebruiken.

Niet direct array[0] nee, maar toch wel zoiets? Of mis ik nu volledig het probleem ...

Pseudo code

JavaScript:

foreach (array as value) {
   var first = value;
   break;
}

[Fusioxan]

Dat gebeurd ook, maar na mijn een-na-laatste post, kwam ik er achter dat het wel met timestamps moet, want anders gaat alles in een andere div staan, wat dus niet de bedoeling is. Alleen de oudste moet vervangen worden met de nieuwste, de rest moet gewoon blijven.

[RobIII]

Fusioxan schreef op woensdag 24 augustus 2011 @ 16:26:
Dat gebeurd ook, maar na mijn een-na-laatste post, kwam ik er achter dat het wel met timestamps moet, want anders gaat alles in een andere div staan, wat dus niet de bedoeling is. Alleen de oudste moet vervangen worden met de nieuwste, de rest moet gewoon blijven.

Misschien moet je eens kijken naar (un)shift(), pop(), push() e.d.?

Maar volgens mij is dit gewoon wat je wil: http://jsfiddle.net/7dmJM/1/

JavaScript:

// Set up test array
var myArray = [];
myArray[1314199861] = 'Foo';
myArray[1314100861] = 'Bar';
myArray[1314111861] = 'Foobar';

// Get lowest timestamp (key) from array
var k = GetLowestTimeStamp(myArray);
console.log('Key:' + k);
console.log('Val:' + myArray[k]);

// Function to get first key from array
function GetLowestTimeStamp(arr) {
    for (key in arr)
        return key;
}

Key:1314100861
Val:Bar

[ Voor 41% gewijzigd door RobIII op 24-08-2011 16:42 ]

[R4gnax]

Fusioxan schreef op woensdag 24 augustus 2011 @ 16:18:
RomeoJ, op StackOverflow had ik het ook al gezien. Maar hij doet het dan nog steeds niet (logisch, want je gebruikt gewoon een omweg (aparte functie) om erachter te komen.

"Hij doet het dan nog steeds niet"?

Dit werkt gewoon hoor.

Je hebt het over key-waardes in een array en het feit dat Math.min een NaN terug geeft. Mij bekruipt het gevoel dat je non-numerieke indices aan het gebruiken bent en dus met object hashes bezig bent i.p.v. met arrays.

[RobIII]

R4gnax schreef op donderdag 25 augustus 2011 @ 09:19:
Je hebt het over key-waardes in een array

Ik zie jouw voorbeeld anders geen key-waardes gebruiken

[Verwijderd]

Als PHP programmeur zijn we verwend met allerlei makkelijke functies die (helaas) niet in JavaScript zitten. Maar je zou kunnen kijken naar PHPJS om dit soort functionaliteiten toch te kunnen gebruiken.

@RobIII: let er wel op dat je niet zeker weet of de key een string of integer is, en dus standaard de eerste key pakken nog wel eens voor verassingen kan zorgen. Met name PHP en de transformatie naar JSON kan hier de boosdoener zijn, dus is het extra sorteren van de array in JS geen overbodige luxe.

[zwippie]

Met underscore.js kun je dit soort loops ook prachtig in JavaScript maken.

Zie voorbeeld, al weet ik niet of dat conform je eigen datastructuur is (heb even het voorbeeld van RobIII gebruikt).

_{edit: underscore.js is wellicht overkill voor dit probleem, maar biedt desalniettemin soms prachtige oplossingen}

[ Voor 18% gewijzigd door zwippie op 25-08-2011 12:37 ]

[RobIII]

Verwijderd schreef op donderdag 25 augustus 2011 @ 10:37:
@RobIII: let er wel op dat je niet zeker weet of de key een string of integer is, en dus standaard de eerste key pakken nog wel eens voor verassingen kan zorgen. Met name PHP en de transformatie naar JSON kan hier de boosdoener zijn, dus is het extra sorteren van de array in JS geen overbodige luxe.

Als de key een timestamp is moet hoort 't in ieder geval gewoon een te integer zijn; is dat niet zo (of dat nou aan JSON ligt of weet-ik-het waar 't allemaal fout kan gaan) doe je gewoon iets fout. By contract moet dat natuurlijk gewoon goed gaan.

Extra sorteren haalt geen klap uit als 't strings zijn (sterker: verergert 't alleen maar) want dan krijg je 1, 11, 2, 21, 3, 30 etc...

[ Voor 9% gewijzigd door RobIII op 25-08-2011 12:46 ]

[R4gnax]

RobIII schreef op donderdag 25 augustus 2011 @ 09:34:
[...]

Ik zie jouw voorbeeld anders geen key-waardes gebruiken

Dat is het hele punt. De TS is waarschijnlijk gewoon in de war met de term 'associative array', wat in JavaScript neerkomt op een object hash en niet een array.

[.oisyn]

Wat is een object hash? Arrays in js zijn niet zoveel verschillend van objecten. Sterker nog, het zíjn objecten, allen inheriten ze van Array. Ook een array kan string keys hebben, en indices zijn niet per se contiguous.

[R4gnax]

.oisyn schreef op donderdag 25 augustus 2011 @ 17:45:
Wat is een object hash? Arrays in js zijn niet zoveel verschillend van objecten. Sterker nog, het zíjn objecten, allen inheriten ze van Array. Ook een array kan string keys hebben, en indices zijn niet per se contiguous.

De term 'object hash' wordt veelal gebruikt als je binnen JavaScript een object literal gebruikt om een simpele key -> value hashmap te maken met op strings gebaseerde keys.

JavaScript:

// Zoiets dus:
var objHash = { "a": 1, "b": 2, "c": 3 }

Hetzelfde kun je niet doen met een Array. Wat je wèl kunt doen is een Array aanmaken en daarna, omdat Array afstamt van Object, er extra properties aan toevoegen. Daarbij misbruik je echter de Array als een normale object literal, wat een bad practice is.

Noch de constructor, noch de literal syntax staat toe dat je de Array met op strings gebaseerde indices initialiseert, wat al duidelijk aangeeft dat het niet de bedoeling is om Array op deze manier te gebruiken. Het zal o.a. de speciale 'length' property van het array breken:

JavaScript:

var arr = [];
arr["foo"] = "bar";
alert(arr.length); // geeft 0 terug en niet 1

Daarnaast loop je het risico dat je in een for loop niet alleen over je eigen keys gaat itereren, maar ook over properties die aan het Array prototype toegevoegd zijn (bijvoorbeeld als polyfill voor ontbrekende functionaliteit in oude JS runtimes in IE, maar ook als utilities toegevoegd door frameworks als Prototype).

JavaScript:

Array.prototype.max = function(){ Math.max.apply( Math, this ); }

var arr = [];
arr["foo"] = "bar";
for (var i in arr) { alert(i); } // geeft zowel "foo" als "max" terug

[.oisyn]

Dat het bad practice is wil niet zeggen dat een array geen keys heeft, en de TS had het toch duidelijk over keys .

Over "object hash": suffe term. Iets met klok en klepel enzo

[Fusioxan]

Oeh, ik ben eens een dagje aan het werk en er wordt volop gereageerd!

R4gnax schreef op donderdag 25 augustus 2011 @ 09:19:
[...]


"Hij doet het dan nog steeds niet"?

Dit werkt gewoon hoor.

Je hebt het over key-waardes in een array en het feit dat Math.min een NaN terug geeft. Mij bekruipt het gevoel dat je non-numerieke indices aan het gebruiken bent en dus met object hashes bezig bent i.p.v. met arrays.

Ik weet zeker dat ik met numerieke keys bezig ben. Als ik namelijk de timestamp gewoon als een value meegeef, komt er een integer uit.

Verwijderd schreef op donderdag 25 augustus 2011 @ 10:37:
Als PHP programmeur zijn we verwend met allerlei makkelijke functies die (helaas) niet in JavaScript zitten. Maar je zou kunnen kijken naar PHPJS om dit soort functionaliteiten toch te kunnen gebruiken.

@RobIII: let er wel op dat je niet zeker weet of de key een string of integer is, en dus standaard de eerste key pakken nog wel eens voor verassingen kan zorgen. Met name PHP en de transformatie naar JSON kan hier de boosdoener zijn, dus is het extra sorteren van de array in JS geen overbodige luxe.

&

zwippie schreef op donderdag 25 augustus 2011 @ 12:35:
Met underscore.js kun je dit soort loops ook prachtig in JavaScript maken.

Zie voorbeeld, al weet ik niet of dat conform je eigen datastructuur is (heb even het voorbeeld van RobIII gebruikt).

_{edit: underscore.js is wellicht overkill voor dit probleem, maar biedt desalniettemin soms prachtige oplossingen}

Hmm, interessant. Zal ik zo dadelijk eens doorlezen!

RobIII schreef op donderdag 25 augustus 2011 @ 12:45:
[...]

Als de key een timestamp is moet hoort 't in ieder geval gewoon een te integer zijn; is dat niet zo (of dat nou aan JSON ligt of weet-ik-het waar 't allemaal fout kan gaan) doe je gewoon iets fout. By contract moet dat natuurlijk gewoon goed gaan.

Extra sorteren haalt geen klap uit als 't strings zijn (sterker: verergert 't alleen maar) want dan krijg je 1, 11, 2, 21, 3, 30 etc...

Hmm, zoals ik al hierboven zei komt er als ik de timestamp als value meegeef, gewoon een integer uit.

R4gnax schreef op donderdag 25 augustus 2011 @ 17:29:
[...]


Dat is het hele punt. De TS is waarschijnlijk gewoon in de war met de term 'associative array', wat in JavaScript neerkomt op een object hash en niet een array.

&

.oisyn schreef op donderdag 25 augustus 2011 @ 17:45:
Wat is een object hash? Arrays in js zijn niet zoveel verschillend van objecten. Sterker nog, het zíjn objecten, allen inheriten ze van Array. Ook een array kan string keys hebben, en indices zijn niet per se contiguous.

&

R4gnax schreef op vrijdag 26 augustus 2011 @ 09:08:
[goede uitleg, bedankt hiervoor]

&

.oisyn schreef op vrijdag 26 augustus 2011 @ 17:09:
Dat het bad practice is wil niet zeggen dat een array geen keys heeft, en de TS had het toch duidelijk over keys .

Over "object hash": suffe term. Iets met klok en klepel enzo

Zoals RobIII is mijn jQuery-kennis nogal oppervlakkig. Ik ben op het gebied van internet slechts een ervaren PHP programmeur. Maar om informatie door te sturen naar JS, gebruik ik json_encode() voor (wat dus een string retourneert (soort serialize dus). Om de json terug te krijgen, gebruik ik $.getJSON() voor. Eerlijk gezegd weet ik niet of dit een associative array retourneert.

[Klaasvaak]

// Function to get first key from array
function GetLowestTimeStamp(arr) {
for (key in arr)
return key;
}

Dit zal niet altijd werken zoals je verwacht.
Omdat een for-in loop over de array heen gaat alsof het een object betreft. En omdat bij een object de volgorde van sleutels niet vast staat zal de eerste tegengekomen sleutel niet altijd de laagste waarde hebben.
Zo krijg ik in FF4 en IE8 de sleutel die als eerst aangemaakt is "Key: 1314199861, Val: Foo", Opera 11.5 geeft wel de laagste waarde terug "Key: 1314100861, Val: Bar".

Je zal dus altijd alle sleutels met elkaar moeten vergelijken om de laagste te vinden.

code:

function forEachIn(o, func) {
 for(var i in o) {
  if(Object.prototype.hasOwnProperty.call(o, i)) {
   func(i, o[i]);
  }
 }
};

function findLowest(obj) {
 var t;
 function compare(key) {
  (t == null || key < t) && (t = key);
 };
 forEachIn(obj, compare);
 return t;
}

findLowest( myArray );

[.oisyn]

Waarom niet gewoon o.hasOwnProperty(i)? Voor het geval dat o geen object is oid (zoals de argunents "array")?

[Klaasvaak]

[qoute]Waarom niet gewoon o.hasOwnProperty(i)?[/qoute]
Enkel voor het uitzonderlijke geval dat het object de sleutel 'hasOwnProperty' bevat.

[.oisyn]

Mja, imho, als je een standaard method gaat overriden dan doe je dat met een reden, en wil je ook dat die method wordt aangeroepen in dit soort gevallen

[R4gnax]

.oisyn schreef op zaterdag 27 augustus 2011 @ 12:52:
Mja, imho, als je een standaard method gaat overriden dan doe je dat met een reden, en wil je ook dat die method wordt aangeroepen in dit soort gevallen

In dit specifieke geval gaat het alleen niet over een nieuwe method implementatie, maar over een key->value pair in een dictionary. Dus hier wil je dat natuurlijk juist niet, hè?

[.oisyn]

Oh ok, ik dacht dat je functie vrij generiek van opzet was, maar dat was blijkbaar niet zo

Zo zou het eventueel ook nog kunnen:

JavaScript:

function forEachIn(o, func)
{
 var hasOwnProperty = Object.prototype.hasOwnProperty.call(o, "hasOwnProperty") && typeof(o.hasOwnProperty) == "function"
  ? o.hasOwnProperty
  : Object.prototype.hasOwnProperty;

 for(var i in o)
 {
  if(hasOwnProperty.call(o, i))
   func(i, o[i]);
 }
};

[ Voor 65% gewijzigd door .oisyn op 29-08-2011 21:39 ]

[R4gnax]

.oisyn schreef op maandag 29 augustus 2011 @ 21:36:
Oh ok, ik dacht dat je functie vrij generiek van opzet was, maar dat was blijkbaar niet zo

Zo zou het eventueel ook nog kunnen:

JavaScript:

function forEachIn(o, func)
{
 var hasOwnProperty = Object.prototype.hasOwnProperty.call(o, "hasOwnProperty") && typeof(o.hasOwnProperty) == "function"
  ? o.hasOwnProperty
  : Object.prototype.hasOwnProperty;

 for(var i in o)
 {
  if(hasOwnProperty.call(o, i))
   func(i, o[i]);
 }
};

Nee. Die versie heeft nog steeds hetzelfde type probleem: wanneer je functies als waarde van een key-value pair op gaat slaan gaat het alsnog mis.

Het beste is echt om hasOwnProperty direct uit het Object prototype te halen. Als je daarnaast echt tot op het idiote toe robuust wilt zijn, dan gebruik je niet Object.prototype, maar {}.prototype zodat het ook werkt wanneer de referentie naar Object in het global object overschreven is. (Dat is alleen wel héél onwaarschijnlijk.)

JavaScript:

function forEach(obj, fn, scope)
{
  var prop, hop = {}.prototype.hasOwnProperty;
  scope = scope || window;

  for( prop in obj ) {
    if( hop.call( obj, prop )) {
      fn.call( scope, obj[ prop ], prop, obj );
    }
  }
};

[.oisyn]

R4gnax schreef op maandag 29 augustus 2011 @ 22:16:
[...]


Nee. Die versie heeft nog steeds hetzelfde type probleem: wanneer je functies als waarde van een key-value pair op gaat slaan gaat het alsnog mis.

Dat doe je niet vanuit JSON, dus áls je dat doet dan ben je gewoon dom bezig.

[R4gnax]

.oisyn schreef op dinsdag 30 augustus 2011 @ 00:02:
[...]

Dat doe je niet vanuit JSON, dus áls je dat doet dan ben je gewoon dom bezig.

Het klopt inderdaad dat je dat in de regel niet vanuit JSON doet. (Het kàn wel, afhankelijk van revival functies die tijdens het parsen bepaalde waardes naar functies omzetten, maar dan nog is het een extreem rand geval.)

[Fusioxan]

Nu school weer is begonnen, kan ik goed nadenken (anders heb je toch niks te doen). Ik vroeg me af, is het een (verstandige) keuze om elke timestamp in een aparte array te zetten en daar dan de laagste uit te halen?