Array to javascript

Question

I have an array of items from the database.

`$this->ingredientsHistory` is the variable that contains the array.

I want to convert this into a javascript var that will hold them all and I can then use them in the autocomplete jquery UI function.

I've tried var ingredients = <?php echo json_encode($this->ingredientsHistory); ?>

This is an example of a print_r($this->ingredientsHistory); output...

Array ( [0] => Array ( [name] => oranges ) [1] => Array ( [name] => chicken ) )

Any help would be appreciated.

Edit - more information:

$(function() {
var ingredients = <?php echo json_encode($this->ingredientsHistory); ?>;
console.log(ingredients);
//this is the default tags that jquery gives me - i need to turn ingredients into something similar.
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: ingredients
});

});

I think you need a semicolon after your echo like that: var ingredients = <?php echo json_encode($this->ingredientsHistory); ?>; — Marcel Gwerder
– Marcel Gwerder, Commented Apr 21, 2013 at 16:06
Insepct your javascript, how does the output of your json encoded array look like? — Marcel Gwerder
– Marcel Gwerder, Commented Apr 21, 2013 at 16:47

Mathieu Amiot · Accepted Answer · 2013-04-21 17:40:14Z

2

Your problem is that you must extract each name property from your php array.

Use something like this

<?php

$ingredientsArray = array(
    array('name' => "Lettuce"),
    array('name' => "Butter"),
    array('name' => "Chocolate"),
    array('name' => "Cheese"),
); // This is your original data structure

$resultArray = array(); // Let's treat it to get a plain array of ingredient names
foreach ($ingredientsArray as $ingredient)
    $resultArray[] = $ingredient['name'];

// And finally, output it
echo json_encode($resultArray);

And if you really want to get it in JS-only (though I don't recommend it, in case you have sensitive data in your $ingredientsArray variable

$(function() {
    // Your PHP-to-JSON stuff
    var ingredientsArray = <?php echo json_encode($ingredientsArray); ?>;

    var ingredientNames = []; // There are faster ways such as reduce, but it's the most browser-compatible way to do this.
    for (int i = 0, l = ingredientsArray.length; i < l; ++i)
        ingredientNames.push(ingredientsArray[i]['name']);

    // Then assign it to your autocomplete plugin
    $('#tags').autocomplete({ source: ingredientNames });
});

Note that hasOwnProperty hasn't been used as we already know the data format for the array.

edited Apr 21, 2013 at 17:40

answered Apr 21, 2013 at 16:38

Mathieu Amiot

1,2148 silver badges16 bronze badges

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

2 Comments

sark9012 Over a year ago

Perfect, I knew I was dealing with a multi dimensional array which is why I posted the code so indepth. I wasn't sure if there was a javascript way of getting within the arrays! This works a treat though, thanks!

Mathieu Amiot Over a year ago

You still can iterate it in JS the same way, will edit my post then :)

flavian · Accepted Answer · 2013-04-21 16:21:12Z

1

echo json_encode($this->ingredientsHistory);

Use JSON as a way to communicate with the client. Simple, fast, widely supported, etc. Couldn't be more easy. And in the client(JavaScript), you have JSON.stringify and JSON.parse to deal with this.

Native supported is unreliable and not guaranteed in legacy mode, but you can use the OFFICIAL JSON implementation to guarantee cross-browser support for JSON. If you are using jQuery, as you indicated, you won't have a problem, just use the jQuery methods instead.

Also, in PHP5, you can use

var ingredients = "<?= $this->ingredients; ?>";

If the inline processing fails, you can always simply use Ajax for this.

$.ajax({
    url: "blabla",
    data: "blabla",
    type: "POST",
    dataType: "json",
    success: function(serverResponse) {
        console.log(serverResponse);
    }
});

And echo json_encode(whatever) on the Ajax target url.

edited Apr 21, 2013 at 16:21

answered Apr 21, 2013 at 15:54

flavian

28.6k11 gold badges68 silver badges106 bronze badges

4 Comments

Marcel Gwerder Over a year ago

Have you tried adding the semicolon missing in your code as stated in my comment above? And the question is what is not working? Any errors in the console? How are you trying to access the elements?

sark9012 Over a year ago

I've added the semi colon and I have this code - var ingredients = <?php echo json_encode($this->ingredientsHistory); ?>; console.log(ingredients); In the console, I'm getting object over and over.

Kristian Vitozev Over a year ago

@alex22, what you can do in PHP5? You mean short tag notation for echo statement? In prior versions it will work only if short_open_tag option is enabled, after 5.4 it's always available.

sark9012 Over a year ago

I've changed the question to add more information of how I need to information to store in the var.

Arturs Vancans · Accepted Answer · 2013-04-21 15:54:10Z

0

You can do a PHP iteration to push elements into Array.

<script>
var jsArray = new Array();
<?php
   for ($this->ingredientsHistory as $value) 
?>
jsArray.push(<?=$value?>);
<?php
   } 
?>
</script>

answered Apr 21, 2013 at 15:54

Arturs Vancans

4,66014 gold badges50 silver badges79 bronze badges

Collectives™ on Stack Overflow

Array to javascript

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related