why does this javascript 'function fetchStreetDetails(callback) {
  fetch("main.json")
    .then((response) => response.json())
    .then((jsonData) => {
      const entryCount = jsonData.length;
    
      // Check if there are more images to display
      if (imageIndex >= entryCount) {
        console.log("No more images to display!");
        return;
      }
    
     const streetDetails = jsonData[imageIndex]; // Get image data based on index

      // Extract details
      const FeatureID = streetDetails.FeatureID;
      streetLatitude = streetDetails.StreetLatitude;
      streetLongitude = streetDetails.StreetLongitude;
      const streetHeading = streetDetails.StreetHeading;
      const streetPitch = streetDetails.StreetPitch;
      const streetPanoID = streetDetails.StreetPanoID;
      const StreetPoints = streetDetails.Points;

      console.log("FeatureID: " + FeatureID);
      console.log("https://www.tripgeo.com/Picture/p2r63q/" + FeatureID + ".jpg"); 
      console.log("Street Latitude: " + streetLatitude);
      console.log("Street Longitude: " + streetLongitude);
      console.log("Street Heading: " + streetHeading);
      console.log("Street Pitch: " + streetPitch);
      console.log("Street PanoID: " + streetPanoID);
      console.log("Street Location: " + StreetPoints);

      // Update numberoffeeds div
      const numberoffeedsElement = document.getElementById("results");
      numberoffeedsElement.textContent = `This is a ${entryCount} round game.`;
      callback(FeatureID);
    })
    .catch((error) => console.error("Error fetching data: ", error));
}
' fail to fetch the correct data from this json - '{
  "Features": [
    {
      "FeatureID": 1,
      "Name": "View of the Arch of Constantine with the Colosseum",
      "Description": "View of the Arch of Constantine with the Colosseum (1742–1745) by Canaletto.\n\nFrom the Getty's Collection Online.\n",
      "Fields": {},
      "Points": [
        {
          "Lat": 41.889619,
          "Lng": 12.490488
        }
      ],
      "StreetLatitude": 41.889678,
      "StreetLongitude": 12.490417,
      "StreetHeading": 69.517,
      "StreetPitch": -1.074,
      "StreetZoom": 1.0,
      "StreetPanoID": "",
      "PictureType": "jpg",
      "PictureWidth": 400,
      "PictureHeight": 269,
      "PictureURL": "https://www.tripgeo.com/Picture/p2r63q/1.jpg"
    },
    {
      "FeatureID": 2,
      "Name": "A Sunday on La Grande Jatte",
      "Description": "A Sunday on La Grande Jatte (1884) by Georges Seurat.\n\nFrom the Art Institute of Chicago.",
      "Fields": {},
      "Points": [
        {
          "Lat": 48.894689,
          "Lng": 2.266436
        }
      ],
      "StreetLatitude": 48.894287,
      "StreetLongitude": 2.264003,
      "StreetHeading": 357.255,
      "StreetPitch": -12.057,
      "StreetZoom": 1.0,
      "StreetPanoID": "",
      "PictureType": "jpg",
      "PictureWidth": 300,
      "PictureHeight": 201,
      "PictureURL": "https://www.tripgeo.com/Picture/p2r63q/2.jpg"
    },
    {
      "FeatureID": 3,
      "Name": "Der Damplatz zu Amsterdam mit dem Rathaus und der Waage",
      "Description": "Der Damplatz zu Amsterdam mit dem Rathaus und der Waage (1689) by Gerrit Adriansz. Berckheyde.\n\nFrom the Staatliche Kunsthalle Karlsruhe.\n",
      "Fields": {},
      "Points": [
        {
          "Lat": 52.373115,
          "Lng": 4.892275
        }
      ],
      "StreetLatitude": 52.372926,
      "StreetLongitude": 4.893187,
      "StreetHeading": 287.773,
      "StreetPitch": 1.378,
      "StreetZoom": 1.0,
      "StreetPanoID": "",
      "PictureType": "jpg",
      "PictureWidth": 1000,
      "PictureHeight": 845,
      "PictureURL": "https://www.tripgeo.com/Picture/p2r63q/3.jpg"
    },
    {
      "FeatureID": 4,
      "Name": "Houses of Parliament, London",
      "Description": "Houses of Parliament, London (1900-1901) by Claude Monet.\n\nFrom the Art Institute of Chicago.",
      "Fields": {},
      "Points": [
        {
          "Lat": 51.49949,
          "Lng": -0.124494
        }
      ],
      "StreetLatitude": 51.500819,
      "StreetLongitude": -0.12093,
      "StreetHeading": 244.084,
      "StreetPitch": -1.643,
      "StreetZoom": 0.962,
      "StreetPanoID": "",
      "PictureType": "jpg",
      "PictureWidth": 400,
      "PictureHeight": 346,
      "PictureURL": "https://www.tripgeo.com/Picture/p2r63q/4.jpg"
    },
    {
      "FeatureID": 5,
      "Name": "Charles Bridge in Prague",
      "Description": "Charles Bridge in Prague (20th Century) by René Leclercq.\n\nFrom the Flemish Art Collection.",
      "Fields": {},
      "Points": [
        {
          "Lat": 50.086526,
          "Lng": 14.411622
        }
      ],
      "StreetLatitude": 50.086498,
      "StreetLongitude": 14.413568,
      "StreetHeading": 267.0,
      "StreetPitch": 0.739,
      "StreetZoom": 1.0,
      "StreetPanoID": "",
      "PictureType": "jpg",
      "PictureWidth": 1000,
      "PictureHeight": 851,
      "PictureURL": "https://www.tripgeo.com/Picture/p2r63q/5.jpg"
    }
  ],
  "channelID": "p2r63q",
  "name": "art",
  "description": "",
  "updated": "2024-03-20T20:14:42"
}'