jQuery can not get correct drop down menu values from a JavaScript object

Question

I used this example https://stackoverflow.com/a/7601415/2118559

However I can not get it to work correctly

At first in outside php file have such array $fetch_child_topic

Array
(
   [TopicName] => A
   [TopicUrl] => a
)

In the outside PHP file I convert it to JSON

echo json_encode($fetch_child_topic, JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS);

In the 'main file' the JavaScript looks like this {"TopicName":"A","TopicUrl":"a"} its name is data.

And here trying to create drop down menu

 for (var text in data) {
    alert( 'text ' + text + ' data' + data );
    var val = data[text];
    $('<option/>').val(val).text(text).appendTo($('#first_subcat_id'))
 };

Drop down menu get long list with numbers like 0,1,2... but I would expect to see the letter A.

In the alert I see

text 0 data{"TopicName":"A","TopicUrl":"a"}
text 1 data{"TopicName":"A","TopicUrl":"a"}
....
text 31 data{"TopicName":"A","TopicUrl":"a"}

Something is wrong... but I can't understand what.

Any ideas, please?

EDIT

code in php file is like this (code a bit modified, to have only one column)

Get data from mysql

try {
$stmt = $db->prepare("SELECT TopicName FROM $table_name WHERE UpperTopicName = ?"); 
$stmt->execute( array($_POST['main_topic']) );
$fetch_child_topic = $stmt->fetchAll(PDO::FETCH_COLUMN);
}//try {
catch (PDOException $e){
echo "<br> Url DataBase Error: " .htmlspecialchars( $e->getMessage() , ENT_QUOTES, "UTF-8").'<br>';
}
catch (Exception $e) {
echo "  Url General Error: ".htmlspecialchars( $e->getMessage() ).'<br>';
}

and

echo json_encode($fetch_child_topic, JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS);

Solution

after get data from external php file (name of jquery var is data), did this

var data = $.parseJSON( data );
$.map( data, function( val, i ) {
$('<option/>').val(i).html(val).appendTo('#first_subcat_id');
});

In drop down menu get letters A, B (as expected)

I think you are confusing jQuery (a JavaScript library) with JavaScript object literals (a way of creating JavaScript objects). — Klors
– Klors, Commented Aug 8, 2014 at 17:18

Klors · Accepted Answer · 2014-08-08 18:08:47Z

1

Your JavaScript should end up looking like this in the source.

var data = {"TopicName":"A","TopicUrl":"a"};  // <== this is a javascript object literal assigned to the variable "data"

var text, val;
for (text in data) {
    val = data[text];
    alert( 'text ' + text + ', val' + val);
    $('<option/>').val(val).text(text).appendTo($('#first_subcat_id'));
}

if you have some HTML like

<select id="first_subcat_id"></select>

If your var data = line isn't structured like that, then you have an issue somewhere in your PHP.

If your PHP file was generating the entire document you could just embed the output from the json_encode into the JavaScript something like this.

<script type="text/javascript">
var data = <?= json_encode($fetch_child_topic, JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS); ?>;

var text, val;
for (text in data) {
    val = data[text];
    alert( 'text ' + text + ', val' + val);
    $('<option/>').val(val).text(text).appendTo($('#first_subcat_id'));
}
</script>

I don't think fetchAll would return an Array in the format you've shown at the top of your example. It returns an Array of associative arrays so probably something more like

Array
(
   [0] => Array
      (
         [TopicName] => A
         [TopicUrl] => a
      )
)

You need to get rid of the outer array. So just do something like this... depending on what your actual output from the SQL query returns.

$fetch_child_topic = $fetch_child_topic[0];

edited Aug 8, 2014 at 18:08

answered Aug 8, 2014 at 17:29

Klors

2,6742 gold badges28 silver badges42 bronze badges

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

7 Comments

Andris Over a year ago

Yes, If I name var data (not related to php) then drop down menu see TopicName and TopicUrl. Something incorrect with php

Klors Over a year ago

@user2118559 where do you output the echo statement, can you show the surrounding text?

Andris Over a year ago

Do you mean code in 'outside' php file? If yes, I will add the code in the question

Klors Over a year ago

@user2118559 Yes, please. I'm wondering how you are getting the string generated by the json_encode() function to your JavaScript.

Andris Over a year ago

Appears, that json_encode passes string and not array. Tried to change to jquery array. Added var data = $.parseJSON( data ); and now in drop down menu see correct number of numbers. But expected to see letters.

|

Collectives™ on Stack Overflow

jQuery can not get correct drop down menu values from a JavaScript object

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related