How do I iterate over such object properties of an object in TypeScript?

I want to iterate over the oCities object and access the properties using a for…in loop as you can see in the attached screen recording but it looks like this for…in statement expected a string property for the iteration to occur, not an object. Any ideas on how I can pull this off?

type City = {
  iPopulation: number;
  sPopulation: string;
  latitude: number;
  longitude: number;
  color?: string;
  name: string;
  x: string;
  y: string;
};
interface Cities {
  [key: string]: City;
}
let oCities: Cities = {
  'Sao Paulo': {
    iPopulation: 11895893,
    sPopulation: '11,895,893',
    latitude: -23.5505,
    longitude: -46.6333,
    name: 'São Paulo',
    x: '0px',
    y: '0px',
  },
  'Rio de Janeiro': {
    iPopulation: 6453682,
    sPopulation: '6,453,682',
    latitude: -22.9068,
    longitude: -43.1729,
    name: 'Rio de Janeiro',
    x: '0px',
    y: '0px',
  },
  Salvador: {
    iPopulation: 2902927,
    sPopulation: '2,902,927',
    latitude: -12.9722,
    longitude: -38.5014,
    name: 'Salvador',
    x: '0px',
    y: '0px',
  },
  Brasilia: {
    iPopulation: 2852372,
    sPopulation: '2,852,372',
    latitude: -15.7942,
    longitude: -47.8822,
    name: 'Brasília',
    x: '0px',
    y: '0px',
  },
}

I’m trying to do something like:

  for(let city in oCities) {
    // save xy position
    oCities[city].x = oCities[city].longitude + 'lon';
    oCities[city].y = oCities[city].latitude + 'lat';
  }

But it’s not working. I really need some ideas.
enter image description here