Javascript array formatting error from php

Question

I have an array, such as this:

[['jkjhkfhkjh jkj jkjhk', '54.324705', '-2.749629', '189', 1, 1, 0, 0, 'Test two', '2 ', '10+', 'http://xx.co.uk/xx/?post_type=listings&p=189', '<img width="160" height="85" src="http://www.xx.com/manage/wp-content/uploads/wheelbase.jpg" class="attachment-thumbnail wp-post-image" alt="wheelbase" title="wheelbase">', '189'],['fghfghfgh  fghfg hf dfh dfh', '54.323174', '-2.744554', '188', 1, 1, 0, 0, 'Test', '2 ', '10+', 'http://xx/xx/?post_type=listings&p=188', '<img width="160" height="85" src="http://www.xx.com/manage/wp-content/uploads/wheelbase.jpg" class="attachment-thumbnail wp-post-image" alt="wheelbase" title="wheelbase">', '188']];

I get the data using php:

echo "[";
  for ($i=0; $i < count($json); $i++) { 
    echo "['" . $json[$i]["content"] . "', '". $json[$i]["lat"] . "', '" . $json[$i]["long"] . "', '" . $json[$i]["id"] . "', 1, 1, 0, 0, '" . $json[$i]["title"] . "', '2 ', '10+', '" . $json[$i]["link"] . "', '<img width=\"160\" height=\"85\" src=\"http://www.xx.com/manage/wp-content/uploads/wheelbase.jpg\" class=\"attachment-thumbnail wp-post-image\" alt=\"wheelbase\" title=\"wheelbase\" />', '" . $json[$i]["id"] . "'],";
  }   
  echo "]";

(I called a variable $json , ignore the fact i called it that, it is not json)

So I echo these out into a div which will be hidden. Then to pick it up in javascript I try this:

var locations = $('#listingsarray').html();

which seems to translate fine into the console, but it is coming in as text rather than as an array. How can I turn this into an array?

@JasonMcCreary im just echoing out some data in the format of a javascript array — Josh Boothe, Aug 21 '13 at 14:19
@adeneo yeah im unsure how to translate it. I tried .text() but again, its not an array. How can I bring it into my js as an array? — Josh Boothe, Aug 21 '13 at 14:20
Sorry to be blunt, but isn't it obvious that `.html()` or `.text()` return strings? After all, HTML *is* text. — Felix Kling, Aug 21 '13 at 14:26
You are taking a jsonish string placing it into an html context as text then you want to interpret it as a javascript array? May I ask why you are doing all of this? — Orangepill, Aug 21 '13 at 14:27
@Orangepill to be iterated through in javascript putting pins on a map — Josh Boothe, Aug 21 '13 at 14:31
@JoshBoothe but... why are you placing it in the html to begin with? there's far better ways to get data from php to javascript. And, the array you're generating isn't valid JSON, therefore that cuts out a lot of possibilities (such as getting the data with ajax) — Kevin B, Aug 21 '13 at 14:41
@KevinB yeah im aware that how im doing it is a really sloppy (and invalid) method, which is why I came here to try learn how to pass a variable in the correct datatype over — Josh Boothe, Aug 21 '13 at 14:49

score 2 · Answer 1 · answered Aug 21 '13 at 14:19

Use JSON.parse to parse the string into JSON, but keep in mind that it won't be valid. You'd be much better off doing this:

echo json_encode(array_map("array_values",$json));

This assumes that the keys are in the order "content", "lat", "long"... and that there are no other keys. If this is not the case, you'll need to iterate through the array to make sure everything's right, then use json_encode.

score 1 · Answer 2 · answered Aug 21 '13 at 14:23

If you're outputting this on page load, try this instead:

echo "<script>var locations = [";
for ($i=0; $i < count($json); $i++) { 
  //...
}   
echo "]</script>";

Then your javascript will have direct access to the locations variable and the array without translating or evaling it.

Though I would certainly look into using json_encode, as the libraries are much better at handling edge cases and the code is much cleaner.

score 1 · Accepted Answer · answered Aug 21 '13 at 14:35

First off you need to build a valid json representation of an array, the technique you are using is resulting in invalid syntax. This Should work out better for you.

$data = array();
for ($i=0; $i < count($json); $i++) { 
  $data[] =  array(
                  $json[$i]["content"],
                  $json[$i]["lat"],
                  $json[$i]["long"],
                  $json[$i]["id"],
                  1,
                  1,
                  0,
                  0,
                  $json[$i]["title"],
                  '2',
                  '10+',
                  $json[$i]["link"],
                  '<img width=\"160\" height=\"85\" src=\"http://www.xx.com/manage/wp-content/uploads/wheelbase.jpg\" class=\"attachment-thumbnail wp-post-image\" alt=\"wheelbase\" title=\"wheelbase\" />',
                  $json[$i]["id"]
              );
}
$jsonString = json_encode($data);

Then if you want to put it into a json context you can simply do this

<script>var jsonArray = <?= $jsonString ?>;</script>

Thanks for providing this. I dont think it is parsing as an array still, in the console it is coming out as being just a single dimentional array without the square brackets `[]` so its just like `value,value,value` and so on (obviously replace value with the actual value expected. I think it is getting there however! — Josh Boothe, Aug 21 '13 at 14:47
@JoshBoothe Make sure you are __NOT__ putting quotes around the echo like `` it should be `` — Orangepill, Aug 21 '13 at 14:51
@JoshBoothe and double check how you are building the $data variable... you should be building an array of arrays. — Orangepill, Aug 21 '13 at 14:54

Javascript array formatting error from php

3 Answers3