PixiJS loading data from sprite sheet

I'm struggling on the PixiJs API for sprite sheets although I suspect this comes partly from a lack of understanding of the app.loader function. so I've been trying to build a basic Chess game in javascript and for this, I am using this generic pieces sprite sheet I found on Wikipedia The long and short of it is assuming I have managed to correctly load the data in properly I am unsure of how to access the texture data outside of the function call as shown in my code below and so the result is an error saying: textures is undefined.

here is the code that i have written as of yet

const app = new PIXI.Application();
document.body.appendChild(app.view);


key = ['w_king', 'w_queen', 'w_bishop', 'w_knight', 'w_castle', 'w_pawn', 
'b_king', 'b_queen', 'b_bishop', 'b_knight', 'b_castle', 'b_pawn'];

app.loader.add('spritesheet', 'pieces.json')
    .load( _=> 
        {
        const textures = key.map(k => PIXI.Texture.from(k));
        });

var sprite = PIXI.Sprite(textures[1]);

app.stage.addChild(sprite)

also, this is the JSON file.

{"frames":
    {
        "w_king":{
            "frame":{"x":0,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":32}},
        "w_queen":{
            "frame":{"x":426,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "w_bishop":{
            "frame":{"x":852,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "w_knight":{
            "frame":{"x":1278,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "w_castle":{
            "frame":{"x":1704,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "w_pawn":{
            "frame":{"x":2130,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "b_king":{
            "frame":{"x":0,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":32}},
        "b_queen":{
            "frame":{"x":426,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "b_bishop":{
            "frame":{"x":852,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "b_knight":{
            "frame":{"x":1278,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "b_castle":{
            "frame":{"x":1704,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}},
        "b_pawn":{
            "frame":{"x":2130,"y":0,"w":426,"h":426},
            "sourceSize":{"w":426,"h":426},
            "spriteSourceSize":{"x":0,"y":0,"w":426,"h":426}}},
    "meta":{
        "image":"spriteSheet.png",
        "format":"RGBA8888",
        "size":{"w":2560,"h":853},
        "scale":1}}
     

Loading the textures is an asynchronous call. As a consequence, every action that you perform on the results has to be made within the load callback (or handled in some other way, eg. promises). This is not specific to PIXI, but rather the asynchronous nature of JavaScript.

Furthermore, the textures variable is accessible within the arrow function only and it won't be available outside of that block. I recommend reading more about variables scope in JavaScript to better understand the problem.

This is the fixed code:

app.loader.add('spritesheet', 'pieces.json')
    .load(_ => {
        const textures = key.map(k => PIXI.Texture.from(k));
        const sprite = PIXI.Sprite(textures[1]);

        app.stage.addChild(sprite)
    });