[JQuery/JSON] Dropdownlist vullen met JSON array

[PdeBie]

Hoi allen,

ik heb een lijst met items welke ik in een dropdownlist moet zetten. Deze items komen middels een ajax request terug als JSON array.

Het array ziet er als volgt uit:

code:

{ 1234:"Piet", 5678:"Kees", 9875:"Henk" }

Deze doorloop ik met de volgende functie om het dropdown element te vullen:

JavaScript:

function PopulateDropDownFromJson(json, element){
        $.each(json,function(val,text){
            $(element).append($('<option></option>').val(val).html(text));
        });
    }

Ik krijg nu echter voor elke letter in het array een aparte option in de dropdown. Dus P, i, e, t, K, e, e, s, H, e, n, k

Iemand een idee?

--edit--
het lijkt erop dat het array verkeerd gevuld word.

zag net dit voorbeeld:

JavaScript:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

Ik mis de square brackets.

[ Voor 18% gewijzigd door PdeBie op 07-05-2013 15:27 ]

[Cyphax]

Welke browser?
Ik heb jouw code geprobeerd, maar 't werkt prima in Chrome.

JavaScript:

    var json = { 1234:"Piet", 5678:"Kees", 9875:"Henk" };
    $.each(json, function(val,text){ 
        console.log(text);
        $("#select1").append($('<option></option>').val(val).html(text)); 
    });             

In de console krijg ik de namen ook zoals jij ze hebben wilt.

[PdeBie]

hmmm raar. IE9 werk ik in. Chrome had ik nog niet geprobeerd.

[Cyphax]

IE10 doet ie het bij ook gewoon in. Ook in IE9-mode.

[PdeBie]

Mja, in jsFiddle werkt het bij mij ook. Daar had ik het ook in eerste instantie in geprobeerd:
http://jsfiddle.net/aJ6GK/1/

Maar in mijn applicatie dus niet. Lijkt erop alsof het array verkeerd ingelezen wordt. Als string ipv als array, omdat hij elke letter pakt. $.each op een string loopt door de letters heen naar mijn weten.

--edit--
dit blijkt correct. als ik 'json' alert, krijg ik inderdaad letterlijk de string te zien en niet als object. Daar gaat het dus mis.

Even uitzoeken.

[ Voor 20% gewijzigd door PdeBie op 07-05-2013 15:40 ]

[Cyphax]

Dat wordt een beetje moeilijk te boordelen, omdat de code die je hebt gepost goed lijkt te zijn en verdere context ontbreekt.

[Barryvdh]

Gebruik je wel http://api.jquery.com/jQuery.getJSON/?

En moeten die keys niet tussen quotes staan? Ik krijg een Unexpected Number Syntaxerror als ik parseJSON gebruik op je string. Met haakjes op de keys van de variabelen, gaat het wel goed.

code:

var string = '{ "1234":"Piet", "5678":"Kees", "9875":"Henk" }'; 
var json = $.parseJSON(string);

[ Voor 121% gewijzigd door Barryvdh op 07-05-2013 15:58 ]

[PdeBie]

Barryvdh schreef op dinsdag 07 mei 2013 @ 15:55:
En moeten die keys niet tussen quotes staan?

Dit bleek inderdaad het euvel i.c.m. met parseJSON. Nu werkt het

top thanks!

[ Voor 4% gewijzigd door PdeBie op 07-05-2013 16:14 ]

[Bosmonster]

Weet niet welke IDE je gebruikt, maar php/webStorm kan checken op JSON validiteit en dat kan je een hoop kopzorgen schelen. Een enkel foutje in je JSON opmaak (zoals quotes..) en hij laadt hem geheel niet meer als JSON namelijk.

Vast online of voor andere IDE's ook wel iets voor te vinden

edit: of vanuit de backend een goede JSON exporter gebruiken natuurlijk, ipv het zelf als string op te maken. Weet je zeker dat het ook goed gaat met encodings en escaping.

[ Voor 38% gewijzigd door Bosmonster op 07-05-2013 16:16 ]

[mcDavid]

Bosmonster schreef op dinsdag 07 mei 2013 @ 16:14:
Weet niet welke IDE je gebruikt, maar php/webStorm kan checken op JSON validiteit en dat kan je een hoop kopzorgen schelen. Een enkel foutje in je JSON opmaak (zoals quotes..) en hij laadt hem geheel niet meer als JSON namelijk.

Vast online of voor andere IDE's ook wel iets voor te vinden

edit: of vanuit de backend een goede JSON exporter gebruiken natuurlijk, ipv het zelf als string op te maken. Weet je zeker dat het ook goed gaat met encodings en escaping.

in PHP gebruik je gewoon json_encode, in andere talen bestaan ongetwijfeld soortgelijke functies.

[Krilo_89]

Cyphax schreef op dinsdag 07 mei 2013 @ 15:29:
IE10 doet ie het bij ook gewoon in. Ook in IE9-mode.

Niet negatief bedoeld, maar meer als tip (mocht je het zelf not niet ondervonden hebben).

De IE9-modus, verschilt van de échte IE9 (geld ook voor IE8 en IE7 modus). Ben hier zelf helaas ook tegenaan gelopen. Blijkt aardig wat verschil in te zitten met javascript. CSS/HTML gaat wel goed.
Die modussen zijn dus leuk om te kijken of de lay-out klopt, maar functionaliteit kan verschillen en de snelheid al helemaal.

[Cyphax]

Daar ga ik ook wel vanuit, ja.

[yeadder]

Mocht je IDE het niet ondersteunen dan kan http://jsonlint.com/ voor validatie zorgen.

[PdeBie]

yeadder schreef op dinsdag 07 mei 2013 @ 17:48:
Mocht je IDE het niet ondersteunen dan kan http://jsonlint.com/ voor validatie zorgen.

ah dank je. Die ga ik in m'n favorieten opslaan