symfony – key “id” for array with key “0,1,2,3,4,5,6” does not exist

I have an error in my symfony project:

The key "id" for the array with the keys "0, 1, 2, 3, 4, 5, 6" does not exist.

I no longer have an object from 0 to 6 in my database because I had to overwrite the data with make: auth, I believe for security

I have new values but I don’t know what to do to avoid this error.

I try to make the climbing sites of my database appear on my openstreet map. So I loop on the id in javascript, with the leaflet API.

var sites = {
  "cul de l'elephant": {
    lat: 48.3727,
    lon: 2.51059,
  },
  Paris: {
    lat: 48.852969,
    lon: 2.349903,
  },
  Brest: {
    lat: 48.383,
    lon: -4.5,
  },
  Quimper: {
    lat: 48.0,
    lon: -4.1,
  },
  Bayonne: {
    lat: 43.5,
    lon: -1.467,
  },
};

var carte = L.map("macarte").setView([48.852969, 2.349903], 5);

L.tileLayer("https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
  attribution:
    'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
  minZoom: 1,
  maxZoom: 20,
}).addTo(carte);

var icone = L.icon({
  iconUrl: "../img/pointeur-de-carte.png",
  iconSize: [50, 50],
  iconAnchor: [25, 50],
  popupAnchor: [-2, -44],
});

for (site in sites) {
  var marqueur = L.marker([sites[site].lat, sites[site].lon], {
    icon: icone,
  }).addTo(carte);

  marqueur.bindPopup(
    <a href="{{ path('site_show', {'id':sites.id}) }}">site</a>
  );
}

I am getting the error quoted above.

here is the structure of my database

Thank you. Cordially.

Answer

Have a look at the documentation for for...in, when you use sites.id it isn’t pointing to anything.

I am assuming that the data is not like you show, and you do have the ID value on the elements. If that is true, and your data looks like on the snippet, you have to update that reference to sites[site].id. Otherwise, edit your answer to show what your data looks like, with the ID on it.

var sites = {
  "cul de l'elephant": {
    id: 12,
    lat: 48.3727,
    lon: 2.51059,
  },
  Paris: {
    id: 5,
    lat: 48.852969,
    lon: 2.349903,
  },
  Brest: {
    id: 34,
    lat: 48.383,
    lon: -4.5,
  },
  Quimper: {
    id: 75,
    lat: 48.0,
    lon: -4.1,
  },
  Bayonne: {
    id: 8,
    lat: 43.5,
    lon: -1.467,
  },
};

for (site in sites) {
  console.log(`Site "${site}" lat is ${sites[site].lat} and lng is ${sites[site].lon}`);
  // If your sites had an ID property, this is how you would access it
  console.log(`Site "${site}"'s ID is ${sites[site].id}`);  
}

console.log('####################');

// You could make the code easier to read updating the variable names
for (siteName in sites) {
  const site = sites[siteName];
  console.log(`Site ${siteName}: Id: ${site.id}, lat: ${site.lat}, lng: ${site.lon}`); 
}

It sounds like you control the server, an improvement could be to update the method to return an array of sites, instead of an object with site names as the keys, as follows:

const sites = [
  {
    id: 12,
    name: "cul de l'elephant",
    lat: 48.3727,
    lon: 2.51059,
  },
  {
    id: 5,
    name: 'Paris',
    lat: 48.852969,
    lon: 2.349903,
  },
  {
    id: 34,
    name: 'Brest',
    lat: 48.383,
    lon: -4.5,
  },
  {
    id: 75,
    name: 'Quimper',
    lat: 48.0,
    lon: -4.1,
  },
  {
    id: 8,
    name: 'Bayonne',
    lat: 43.5,
    lon: -1.467,
  },
];
sites.forEach( site => {
  console.log(`Site ${site.name}: Id: ${site.id}, lat: ${site.lat}, lng: ${site.lon}`); 
});