Bulk preload images with different variable name from JSON - p5.js web

p5.js Coding Questions
1

Hi,

I have a JSON file populated with “brandName” and “brandLogo” fields.

I’m trying to preload 30ish logos to my project so I can display them when needed later on in the code. I’d also like to assign the images to variables using the correspondent brandName.

On stackoverflow (code snipett below) I found a seamingly OK solution but it doesn’t really work in case I have multiple items in my JSON file but I can display the image if there’s only 1 in the JSON. In every other cases I got an endless “loading…” message on screen after running the code. Also, this is still not solving my naming issue though.

The ideal solution would be a bunch of new variable (eg.: “brandName1”, “brandName2”,…“brandName38”) which I can call later on and display the image like image(brandName1, x,y,h,w).

Any idea how to move forward? Is this approach even possible/recommended in JS?
Any recommendation is appreciated!
Thanks,

let imgList = []

function preload () {
  brands = loadJSON("myFiles.json",resultLoaded)
}

function resultLoaded(allBrands) {
  imageData = allBrands;
  indexMax = imageData.length;
  for (i = 0; i < indexMax; i++) {
    url = imageData[i]["brandImage"];
    imgList.push(loadImage(url));
    
//console.log("img added")
  }
2

Although it’s a CSV instead of a JSON file, push() each loadImage() into an array is also the approach used in the online sketch below:

In order to get a more precise help we’d need to see a sample of your JSON file.