Passing JSON created in PHP to Javascript changes a result and I don't understand why

Question

I have an object in PHP that I'm passing to Javascript in the same page. It seems to be passing through fine as a console.log statement returns the expected result but when I try to turn it into a Javascript variable the "id" is replaced with a 1, no quotation marks, rather than the expected result. If I wrap the PHP statement in the Javascript in square brackets the "id" does not change, but then it's formatted oddly. What I'm wondering is why this is occurring and if there's something I should do differently.

ETA: Since there was some confusion: The input is "Data," below. That is generated from the results of a SQL query by way of an array_push statement. I have included the code for each row of the SQL query and the array_push statement below, but there does not seem to be a problem with the PHP side.

My expected output is simply the data to be transferred to a JSON object on the javascript side with the appropriate variable, using the code mentioned under "Javascript." Instead I am getting something like this as console.log output:

   {
    DNB_number: "0"
    color: "darkred"
    id: 1
    name: "Anonymous"
    role: "Author"
    size: null
    type: "person"
    witness_work_id: "1467"
    witness_work_role_id: "1659"
   }

That 1 under id is what is the issue.

There is nothing happening on the javascript side before the attempt to convert the result to a javascript variable (what you see under javascript below), so there's not much else I can tell you there. The conversion on the PHP side happens, I start my javascript, then immediately attempt to invoke it on the javascript side.

PHP code:

$person_color = "darkred";

foreach ($person_data as $row) {
$person_id = $row["person_id"];
$type = "person";
$witness_work_role_id = $row["Witness_work_role_id"];
$witness_work_id = $row["Witness_work_id"];
$person = $row["Person_name"];
$DNB = $row["Oxford_DNB_number"];
$role = $row["Role"];
$color = $person_color;

array_push($GLOBALS['person_array'], array(
  'id'=>$person_id,
  'witness_work_role_id'=>$witness_work_role_id,
  'witness_work_id'=>$witness_work_id,
  'type'=>$type,
  'name'=>$person,
  'DNB_number'=>$DNB,
  'role'=>$role,
  'color'=>$color,
  'size'=> NULL
));
}

$jperson = json_encode($person_array);

Javascript code:

person_array = <?=$jperson; ?>;

Data:

[
    {
        "id": "1",
        "witness_work_role_id": "1660",
        "witness_work_id": "1468",
        "type": "person",
        "name": "Anonymous",
        "DNB_number": "0",
        "role": "Author",
        "color": "darkred",
        "size": null
    },
    {
        "id": "152",
        "witness_work_role_id": "1573",
        "witness_work_id": "1384",
        "type": "person",
        "name": "Gilbert Banester",
        "DNB_number": "0",
        "role": "Author",
        "color": "darkred",
        "size": null
    },
    {
        "id": "153",
        "witness_work_role_id": "1574",
        "witness_work_id": "1385",
        "type": "person",
        "name": "Elizabeth Plantagenet (Elizabeth of York)",
        "DNB_number": "8635",
        "role": "Author",
        "color": "darkred",
        "size": null
    },
    {
        "id": "3",
        "witness_work_role_id": "1642",
        "witness_work_id": "1451",
        "type": "person",
        "name": "Geoffrey Chaucer",
        "DNB_number": "5191",
        "role": "Author",
        "color": "darkred",
        "size": null
    },
    {
        "id": "7",
        "witness_work_role_id": "1643",
        "witness_work_id": "975",
        "type": "person",
        "name": "Benedict Burgh",
        "DNB_number": "3390",
        "role": "Author",
        "color": "darkred",
        "size": null
    },
    {
        "id": "5",
        "witness_work_role_id": "1659",
        "witness_work_id": "1467",
        "type": "person",
        "name": "Anonymous",
        "DNB_number": "0",
        "role": "Author",
        "color": "darkred",
        "size": null
    }
]

Where are you seeing it without quotes? Show that part of the code. — Barmar, Dec 02 '20 at 21:52
Please read over [how to ask](https://stackoverflow.com/help/how-to-ask) and edit your question with a more clear example explicitly showing your *input, current output, and expected output*. It's not clear what data you're presenting to us currently - is that `$jperson` in PHP, or is that `person_array` in JS? And is your data what's currently being output or what you want to output? — WOUNDEDStevenJones, Dec 02 '20 at 21:54
`$person_array` appear to have no value. Same as `$person_color` — dazed-and-confused, Dec 02 '20 at 22:05
all you have to do is look at the output on the webpage, essentially what does `person_array = =$jperson; ?>` look like when you view source? that is the start of your answer. — quickshiftin, Dec 02 '20 at 22:08
$person_array is a global variable (`$GLOBALS['person_array']`) and I'll go back and add $person_color as it's called earlier in the php. — medievalmatt, Dec 02 '20 at 22:08
In your new update, the `id` appears as an integer, whereas at the bottom it looks like strings. Maybe there's an unwanted type cast going on? What do you expect that id to be? — dazed-and-confused, Dec 02 '20 at 22:08
It should be "5" That's the final item from the data at the bottom of the question. As for what person_array looks like when I view source, this is what I get: `{"id":"5","witness_work_role_id":"1467","witness_work_id":"1280","type":"person","name":"Anonymous","DNB_number":"0","role":"Author","color":"darkred","size":null}'`` Which is what I expect. But any time it's invoked with the variable -- even in console.log -- I get that 1. I don't know what's causing it, and it only happens for this one key/value combination in this one variable. — medievalmatt, Dec 02 '20 at 22:15
For testing purposes, what if you take PHP out of the equation and manually hardcode the JSON array in JS? So literally have `person_array = [{"id": "1", "witness_work_role_id": "1660", ... } ];`, then inspect `person_array`. When I do that in my JS console (`person_array[0]['id']`) I get `"1"` as I'd expect because that's what is being assigned. If this works as expected, then do what @quickshiftin suggested and inspect the webpage itself to see if `person_array = [...]` matches what you hardcoded previously. — WOUNDEDStevenJones, Dec 02 '20 at 22:20
Note, this is the exact purpose of including a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). The question-writing process as documented on SO usually helps you answer a bunch of the questions we're asking before we have to ask them, and often will also help you answer the question on your own before you're even finished writing it. Yes, it requires more work on your end. But that's because it's a viable path toward a solution. — WOUNDEDStevenJones, Dec 02 '20 at 22:28
It's really odd: hardcoding the five items I in Data in my question, then checking them with person_array[0].id, person_array[1].id, etc. yields the expected result. Checking the source both for the hardcoded and dynamic versions yields the expected result. But doing a console.log(person_array) or anything with person_array as an object displays all the id values as 1. And it does that regardless of browser. I'm going to step away from this and think it through a bit, but at least I know now it's not my coding ineptitude that's the issue so much as something more odd and substantive. — medievalmatt, Dec 02 '20 at 22:36

WOUNDEDStevenJones · Answer 1 · 2020-12-02T22:45:57.830

Let's work this out in a minimal example. Based on what you're saying, the variable is a string (of an int), and the value is correct in memory. But when you view that value via console.log you see an int instead of a string.

var test = "1";
if (typeof test == 'string') {
  console.log('yes, it is a string');
} else {
  console.log('no, it is not a string');
}

If you copy/paste the above into your JS console and run it, you'll see the message yes, it is a string. This proves that it is a string in memory.

another way to test this value is to just run test in your console, and you should see "1" output.

But now, when we use console.log to inspect the value:

console.log(test) outputs 1

Another example without a variable: console.log("123") outputs 123, not "123"

What's apparently happening is just an artifact of console.log. See Javascript console.log(object) vs. concatenating string for more examples and explanations. https://dmitripavlutin.com/console-log-tips/ lists some more options. For instance, if you create an object containing your variable and output that: console.log({test}) will output {test: "1"}, so you can see again that test is a string with the value "1".

To test and confirm that it renders everything as a string (since your point regarding type is solid), I put the array through `JSON.Stringify`: `person_array = JSON.stringify(person_array, (k, v) => v && typeof v === 'object' ? v : '' + v);` and did a `console.log` of the result. That generated the expected results. But wrapping that statement in `JSON.Parse` generated the same result for "id" as before. Since it can't be replicated It's obviously a weirdness in my code, and you're obviously right the type is the issue. I wish I knew why this bit of JSON is odd when the others work fine. — medievalmatt, Dec 02 '20 at 23:43

Passing JSON created in PHP to Javascript changes a result and I don't understand why

1 Answers1