populating a jQuery Select2() control with JSON data from PHP

Question

I have done the same thing several times (also on the same project actually) and it works fine. I have an issue just with this instance of the same code. First of all I select some data from a db table:

$azioni = $pdo->query("SELECT id_az, concat_ws('-',Descrizione, RGE) as descrizione 
                       FROM azioni_head 
                          JOIN sofferenze ON sofferenze.id_soff = azioni_head.id_soff
                        ORDER BY Descrizione")
               ->fetchAll(PDO::FETCH_ASSOC);

This gives me an array like this (just first few items):

Array
(
    [0] => Array
        (
            [id_az] => AZ000000126
            [descrizione] => Acciaierie Weissenfels S.p.A.-n/d
        )

    [1] => Array
        (
            [id_az] => AZ000000017
            [descrizione] => Acofer S.p.A.-n/d
        )
)

Then I convert this array in a Json array doing: var azioni = <?php echo json_encode($azioni); ?>; and finally I populate a Select2 using these data but this time the select2 has no items inside. If I try to view the array once it is encoded using alert(azioni.join( )); I get:

[object Object],[object Object],[object Object],[object Object],

Finally I run:

$('#cod_az').select2({ placeholder: "Scegli", data: azioni });

What is wrong? Why I cannot use this array to populate Select2 with the data? It works in other section of my application!

Edit this is the result of console.log(azioni) in firebug:

[
Object { id_az="AZ000000126",  descrizione="Acciaierie Weissenfels S.p.A.-n/d"}, 
Object { id_az="AZ000000017",  descrizione="Acofer S.p.A.-n/d"}, 
Object { id_az="AZ000000039",  descrizione="ADANI SAS DI ADANI PAOLO & C. S.p.A.-n/d"}, 
Object { id_az="AZ000000019",  descrizione="Administration Speciale ...NG S.A. en faillite-n/d"}
]

console.log(azioni) and look at your Javascript console. alert() is useless for debugging. — deceze
– deceze ♦, Commented Jul 6, 2015 at 9:21
no. This json array is the only one that I cannot use to populate the data in the select2 (all the other conditions are the same) while the same code works in other pages on the same application! — user2399035
– user2399035, Commented Jul 6, 2015 at 9:31
Well, since the array is obviously fine, and we do not see what you're doing with it, we can't help a lot further at this point. — deceze
– deceze ♦, Commented Jul 6, 2015 at 9:41

Josef P. · Accepted Answer · 2015-07-06 10:27:50Z

8

To debug, use console.dir(azioni); to inspect your objects.

Change your id_az and descrizione keys to id and text

var data = [{ id: 0, text: 'item1' }, { id: 1, text: 'item2' }];

$(".js-example-data-array").select2({
  data: data
})

https://select2.github.io/examples.html

By default jquery select2 expects data to be in id/text format.

answered Jul 6, 2015 at 10:27

Josef P.

2451 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pid · Accepted Answer · 2015-07-06 09:27:24Z

0

That's the standard and desired behavior. What you want is examine the content of the object instead of getting the [object Object] string, which is the correct result of the toString() method.

There are several ways to examine a structure of arrays and objects in Javascript. What I do is pretty simple and works well but it has a slight twist in it.

var data = JSON.parse(input);
// data now contains the JSON data
// to print it on-screen I do:
alert(JSON.stringify(data));

This might sound strange to re-code the data into JSON, but you have done a full turn in:

parsing JSON
rendering JSON

So you really can be confident that the input string is valid JSON and what you see in the alert() is the actual content. I don't know an easier method than this.

EDIT: Mind you, it is not the same as printing the input string directly. The decode/recode turn-around really does a lot for you: it shows that it can decode the JSON and shows you how it actually is after decoding. For example, the order of properties is not preserved.

answered Jul 6, 2015 at 9:27

pid

11.6k6 gold badges37 silver badges67 bronze badges

2 Comments

user2399035 Over a year ago

Thanks pid! now I have one more confirmation I have a valid json array. But the issue about why I cannot use that json to populate a Select2 remains the same

pid Over a year ago

Yes, I see. The title is a bit misleading I think I'll fix it for you so that the right people see it.

Collectives™ on Stack Overflow

populating a jQuery Select2() control with JSON data from PHP

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related