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
– Barmar, Commented Dec 2, 2020 at 21:52
Please read over 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
– WOUNDEDStevenJones, Commented Dec 2, 2020 at 21:54
$person_array appear to have no value. Same as $person_color — dazed-and-confused
– dazed-and-confused, Commented Dec 2, 2020 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
– quickshiftin, Commented Dec 2, 2020 at 22:08
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
– WOUNDEDStevenJones, Commented Dec 2, 2020 at 22:20

WOUNDEDStevenJones · Accepted Answer · 2020-12-02 22:45:57Z

0

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".

edited Dec 2, 2020 at 22:45

answered Dec 2, 2020 at 22:36

WOUNDEDStevenJones

5,3356 gold badges45 silver badges53 bronze badges

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

1 Comment

medievalmatt Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related