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

**URL:** <https://discourse.processing.org/t/bulk-preload-images-with-different-variable-name-from-json-p5-js-web/25610>\
**Category:** Coding Questions\
**Created:** [November 22, 2020, 3:29pm UTC](https://discourse.processing.org/t/bulk-preload-images-with-different-variable-name-from-json-p5-js-web/25610 "2020-11-22T15:29:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![patkosd](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@patkosd](https://discourse.processing.org/u/patkosd)\
**Post date:** [November 22, 2020, 3:29pm UTC](https://discourse.processing.org/t/bulk-preload-images-with-different-variable-name-from-json-p5-js-web/25610/1 "2020-11-22T15:29:28Z")

</div>

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,

```auto
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")
  }

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 23, 2020, 2:15am UTC](https://discourse.processing.org/t/bulk-preload-images-with-different-variable-name-from-json-p5-js-web/25610/2 "2020-11-23T02:15:48Z")

</div>

> [@patkosd](#):
>
> Is this approach even possible/recommended in JS?

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:

https://glitch.com/embed/#!/embed/preload-images-from-csv?path=sketch.js&previewSize=0&sidebarCollapsed=true

> [@patkosd](#):
>
> Any recommendation is appreciated!

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