JSON photo data parsing So this original piece of code:

const imgUrls = {};

function onXhrLoad() {
  const json = JSON.parse(this.response);
  const photos = json.photos ? json.photos.photo : [json.photo];
  for (const {id, url_o} of photos) {
    imgUrls[id] = url_o;
  }
}


The original code assumed that the biggest available url to an image in the object "photos" is "url_o", but sometimes that size is not available so I wanted to change the "url_o" in the last 2 lines to the biggest size available in "photos" using the array size (array "size" in the modified code is the order of sizes from biggest to smallest).

so I modified the code as follows:

const imgUrls = {};
const sizes = ['url_o', 'url_6k', 'url_5k', 'url_4k', 'url_3k', 'url_k', 'url_h', 'url_l'];

function onXhrLoad() {
  const json = JSON.parse(this.response);
  const photos = json.photos ? json.photos.photo : [json.photo];
  for (var p of photos) {
    for (var s of sizes) {
        if (s in p) {
            var url = p[s];
            break;
        }
    }
    const id = p.id;
    imgUrls[id] = url;
  }
}


As requested in a comment, there is an example response at this link.
In this response there is no url_o, the biggest is url_6k

My question is if there is a better way to change the "url_o" than going through two for loops and an if condition.
find the first "biggest" url size name. A more convenient way is using Array.prototype.find() method:
p.id can be used directly as a key for object imgUrls - instead of generating constant const id = p.id; for each p(photo)




const imgUrls = {};
const sizes = ['url_o', 'url_6k', 'url_5k', 'url_4k', 'url_3k', 'url_k', 'url_h', 'url_l'];


function onXhrLoad() {
  const json = JSON.parse(js);
  const photos = json.photos ? json.photos.photo : [json.photo];
  for (var p of photos) {   
      imgUrls[p.id] = p[sizes.find((s) =&gt; p[s])];
  }
}