Unexpected number showing up at the end of JSON body - php

Question

I am trying to write a simple demo that reads a json file with php and ajax. In js I have
// initial entry point
function main(){
var button = document.getElementById("button");
button.addEventListener("click",test);
button.addEventListener("click",getSummary);
}
function test(){
console.log("button was clicked");
}
function getSummary(){
asyncRequest = new XMLHttpRequest();
asyncRequest.addEventListener("readystatechange", processResponse, false);
console.log("sending request");
asyncRequest.open("GET","http://localhost/summary.php",true);
asyncRequest.send(null);
}
function processResponse(){
console.log("processing request");
if(asyncRequest.readyState==4 && asyncRequest.status==200){
console.log(asyncRequest.response);
}
}
summary.php
<?php
$data = readfile("summary.json");
header('Content-Type: text/json;charset=utf-8');
echo json_encode($data);
summary.json
{
"products":[
{
"product":"professional pencil",
"image":"pencil.jpg",
"description":"The most verstile tool any programmer can have. With this professional pencil you'll be able to sketch out plans and fix mistakes!"
},
{
"product":"coffee mug",
"image":"coffee_mug.jpg",
"description":"Keep your programming skills sharp and your coffee hot with this one of a kind coffee mug."
},
{
"product":"programming book",
"image":"programming_book.jpg",
"description":"Learn how to program effectively by reading this book."
}
]
}
When I make a request I get an unusual 706 at the end of the response.
curl localhost/summary.php | Select Content -Expand Content | jq produces
{
"products": [
{
"product": "professional pencil",
"image": "pencil.jpg",
"description": "The most verstile tool any programmer can have. With this professional pencil you'll be able to sketch out plans and fix mistakes!"
},
{
"product": "coffee mug",
"image": "coffee_mug.jpg",
"description": "Keep your programming skills sharp and your coffee hot with this one of a kind coffee mug."
},
{
"product": "programming book",
"image": "programming_book.jpg",
"description": "Learn how to program effectively by reading this book."
}
]
}
706
Any help with this would be greatly appreciated.

Answer 1

For your summary.php you actually want it to be more like the following to do what you are intending to do
<?php
$data = file_get_contents("summary.json");
header('Content-Type: text/json;charset=utf-8');
echo $data;

Answer 2

json_encode isn't necessary when the data is already JSON text.
And, more importantly, readFile returns a number indicating the number of bytes read. That's the number in $data which you're then outputting and seeing in your results. readFile sends the actual file data direct to the output, not into a variable.
So your code can be shortened to simply
header('Content-Type: text/json;charset=utf-8');
readfile("summary.json");
Documentation: https://www.php.net/manual/en/function.readfile.php