Javascript 如何从JSON获取数据？

我正在努力解决一个我无法解决的问题。我m从JSON获取数据，以编写html的DOM（一个存储，我使用该JSON编写不同的项目）。当我试图从函数中获取json数据，以便将所有项目推送到一个数组中（该数组将是购物车）时，问题就开始了。 我知道的每件事都试过了，唯一得到的是未定义的。 我需要帮助

这是密码

//this is the JSON file

[{
    "id" : "cnj01",
    "form_id" : "cnj_form",
    "title" : "Conejita dormilona",
    "name" : "conejitadormilona",
    "description" : "Conejita tejida con hilo fino rosa, sin accesorios.",
    "description_mid" : "Conejita tejida al crochet con hilo mediano color rosa. Se pueden incluir accesorios como chaleco o bufanda.",
    "description_long" : "Conejita tejida al crochet con hilo mediano color rosa. Rellenada con vellón siliconado. La altura es de 22 cm. El accesorio incluído es una vincha tejida con el mismo tipo y color de hilo. También se pueden incluir accesorios como chaleco o bufanda con colores a elección.",
    "price" : 850,
    "cant" : 1,
    "image" : "images/products/conejita.jpg",
    "altimg" : "conejita dormilona - mununuras.ar - juguetes de apego",
    "stock" : 4
},
{
    "id" : "zrt01",
    "form_id" : "zrt_form",
    "title" : "Zorrito cariñoso",
    "name" : "zorritocarinoso",
    "description" : "Zorrito tejido en hilo fino con ojos de seguridad.",
    "description_mid" : "Este simpático zorrito viene con un ocico plástico y ojitos de seguridad para los mas chiquitos.",
    "description_long" : "Este simpático zorrito viene con un ocico plástico y ojitos de seguridad para los mas chiquitos. Rellenada con vellón siliconado. La altura es de 14 cm. Tejido en hilo mediano de color negro, blanco y marron anaranjado.",
    "price" : 950,
    "cant" : 1,
    "image" : "images/products/zorrito.jpg",
    "altimg" : "zorrito cariñoso - mununuras.ar - juguetes de apego",
    "stock" : 3
},
{
    "id" : "mds01",
    "form_id" : "mds_form",
    "title" : "Llavero medusa",
    "name" : "llaveromedusa",
    "description" : "Llavero medusa, con anilla metálica pequeña.",
    "description_mid" : "Medusa tejida al crochet con hilo fino. Posee anilla de metal cosida. Viene en tres tamaños.",
    "description_long" : "Medusa tejida al crochet con hilo fino. Posee anilla de metal cosida. Viene en tres tamaños grande (7cm), mediano (5cm) y chico (3cm). Rellena con vellón siliconado. Ideal para regalar!",
    "price" : 550,
    "cant" : 1,
    "image" : "images/products/medusa.jpg",
    "altimg" : "Llavero medusa - mununuras.ar - juguetes de apego",
    "stock" : 10
},
{
    "id": "plt01",
    "form_id" : "plt_form",
    "title" : "Colgante de pollitos",
    "name" : "colgantepollito",
    "description" : "Colgante de tres pollitos con anillo transparente.",
    "description_mid" : "Cogante de tres pollitos con anillo transparente. Ideal para adornar tus cortinas.",
    "description_long" : "Colgante de tres pollitos tejidos al crochet, ideal para adornar tus cortinas. Viene en un único tamaño (45cm). Los pollitos están rellenos con vellón siliconado.",
    "price" : 750,
    "cant" : 1,
    "image" : "images/products/pollito.jpg",
    "altimg" : "Colgante de tres pollitos - mununuras.ar - juguetes de apego",
    "stock" : 5
}
]


// product constructor
class Product {
    constructor (id, form_id, title, name, description, description_mid, description_long, price, cant, image, altimg, stock) {
        this.id = id;
        this.form_id = form_id;
        this.title = title;
        this.name = name;
        this.description = description;
        this.description_mid = description_mid;
        this.description_long = description_long;
        this.price = parseFloat(price);
        this.cant = parseInt(cant);
        this.image = image;
        this.altimg = altimg;
        this.stock = parseInt(stock);
        this.subtotal = this.price * this.cant;
    }
}

// this is where I want to push every item of the JSON//
let shoppingCart = new Array;


const req = new XMLHttpRequest();
req.open('GET', 'scripts/products.json', true);
req.send();
req.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        let data = JSON.parse(this.responseText);

        // this IS NOT WORKING
        data.forEach( (element) => {
            // this shows the correct data
            console.log(element);
            let product =  new Product (`${element.id}`, `${element.form_id}`, `${element.title}`, `${element.name}`, `${element.description}`, `${element.description_mid}`, `${element.description_long}`, `${element.price}`, `${element.cant}`, `${element.image}`, `${element.altimg}`, `${element.stock}`);
            shoppingCart.push(product);
//   these logs show me the correct data but when I do a console.log(shoppingCart) 
// out of this function, The only thig I get is "undefined".
            console.log(product);
            }
        )
        console.log(data);
        //the "for" below is writing my html without any problem.
        //That means the problem starts when I try to take the "data" content out of req.onreadystatechange = function ()
        // in order to push every item into shoppingCart
        for (item of data) {
            $("#show_products").append(`
            <article class="products__item">
            <div>
                <img src="${item.image}" alt="${item.altimg}">
            </div>
            <div class="products__item--description">
                <h3 tabindex=0>${item.title}</h3>
                <p tabindex=0>${item.description_mid}</p>
                <div class="products__item--description--buttons">
                    <a tabindex=0 href="#${item.id}_popup" class="know">know more</a>
                    <a tabindex=0 class="add" id="${item.form_id}">add to shopping cart</a>
                </div>
            </div>
        </article>
            <div id="${item.id}_popup" class="window__popup">
                <div class="container__popup">
                    <div class="popup"><a tabindex=0 href="" class="close__popoup">X</a>
                        <div><img src="${item.image}" alt="${item.altimg}"></div>
                            <div class="popup--description">
                                <div tabindex=0 class="title">${item.title}</div>
                                <p tabindex=0>${item.description_long}</p>
                            <div tabindex=0 class="price__popup">$950.-</div>
                            <a tabindex=0 class="add" id="zrt-btn2">add to shopping cart</a>
                        </div>
                    </div>
                </div>
            </div>
            `);
        }
    }
}
// here I can see al the items in the array
console.log(shoppingCart);

// but here, I get undefined
console.log(shoppingCart[0]);
console.log(shoppingCart[1]);
console.log(shoppingCart[2]);
// etc

//这是JSON文件
[{
“id”：“cnj01”，
“表格id”：“cnj表格”，
“标题”：“Conejita dormilona”，
“名称”：“conejitadormilona”，
“描述”：“在意外情况下，我的孩子们被杀了。”，
“描述中”：“红色罗莎钩针织物，包括红色罗莎钩针织物。”，
“描述长”：“钩针编织物的颜色为玫瑰色、硅色织物的颜色为22厘米，装饰物的颜色为白色，装饰物的颜色为蓝色，装饰物的颜色为蓝色，装饰物的颜色为蓝色，装饰物的颜色为蓝色。”，
“价格”：850美元，
“不能”：1，
“image”：“images/products/conejita.jpg”，
“altimg”：“conejita dormilona-mununuras.ar-juguetes de apego”，
“股票”：4
},
{
“id”：“zrt01”，
“表格id”：“zrt表格”，
“标题”：“佐里托·卡里尼奥斯”，
“名称”：“佐里托卡里诺”，
“描述”：“Zorrito tejido en hilo fino con ojos de seguridad.”，
“描述中”：“我的妻子是西姆帕蒂科·佐里托，我的妻子是西姆帕蒂科·佐里托。”，
“描述长”：“Este simpático zorrito Vie con un ocico plástico y ojitos de Segurida de mas chiquitos.Rellenada con vellón siliconado.La altura es de 14 cm.Tejido in hilo mediano de color negro，blanco y marron anaranjado.”，
“价格”：950，
“不能”：1，
“image”：“images/products/zorrito.jpg”，
“altimg”：“zorrito cariñoso-mununuras.ar-juguetes de apego”，
“股票”：3
},
{
“id”：“mds01”，
“表格id”：“mds表格”，
“标题”：“美洲驼”，
“名称”：“llaveromedusa”，
“描述”：“美洲驼，con anilla metálica pequeña.”，
“描述中”：“美杜莎·特吉达·艾尔·钩针织物与菲诺·波西·阿尼拉·德·科西达·维恩·特雷斯·塔马尼奥斯。”，
“描述长”：“美杜莎·特吉达·艾尔·钩针编织，金属丝织，大尺寸（7厘米），中位数（5厘米）和奇科（3厘米）。硅纤维织物。理想的皇室成员！”，
“价格”：550，
“不能”：1，
“image”：“images/products/medusa.jpg”，
“altimg”：“美杜莎骆驼-穆努努拉斯·阿尔-阿佩戈湖”，
“股票”：10
},
{
“id”：“plt01”，
“表格id”：“plt表格”，
“标题”：“Colgante de pollitos”，
“名称”：“colgantepollito”，
“描述”：“Colgante de tres pollitos con anillo transparente.”，
“描述中”：“透明的花粉。理想的装饰物。”，
“描述：”：“钩针式花粉瓶，理想的cortinas.Viene enúnico tamaño（45厘米）。硅纤维水平的花粉瓶。”，
“价格”：750美元，
“不能”：1，
“image”：“images/products/pollito.jpg”，
“altimg”：“Colgante de tres pollitos-mununuras.ar-juguetes de apego”，
“股票”：5
}
]
//产品构造师
类产品{
构造器（id、表单id、标题、名称、说明、说明中、说明长、价格、铁路超高、图像、高度、库存）{
this.id=id；
this.form\u id=form\u id；
this.title=标题；
this.name=名称；
this.description=描述；
this.description\u mid=description\u mid；
this.description_long=description_long；
this.price=parseFloat（价格）；
this.cant=parseInt（铁路超高）；
这个图像=图像；
this.altimg=altimg；
this.stock=parseInt（stock）；
this.subtotal=this.price*this.cant；
}
}
//这就是我想要推送JSON的每一项的地方//
let shoppingCart=新数组；
const req=new XMLHttpRequest（）；
请求打开（'GET'，'scripts/products.json'，true）；
请求发送（）；
req.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
让data=JSON.parse（this.responseText）；
//这不起作用
data.forEach（（元素）=>{
//这显示了正确的数据
控制台日志（元素）；
让product=newproduct（`${element.id}`、`${element.form_id}`、`${element.title}`、`${element.name}`、`${element.description}`、`${element.description_mid}`、`${element.description_long}`、`${element.price}、`${element.cant}、`${element.image}、`${element.altimg}、`、`element.stock}）；
购物车。推（产品）；
//这些日志向我显示正确的数据，但当我执行console.log（shoppingCart）时
//在这个函数中，我得到的唯一东西是“未定义”。
控制台日志（产品）；
}
)
控制台日志（数据）；
//下面的“for”是毫无问题地编写我的html。
//这意味着当我试图从req.onreadystatechange=function（）中取出“数据”内容时，问题就开始了
//为了把每一件东西都推到购物车里
（数据项）{
$（“#展示产品”）。追加(`
${item.title}
${item.description\u long}
$950.-
添加到购物车
`);
}
}
}
//在这里我可以看到数组中的所有项
控制台日志（shoppingCart）；
//但在这里，我没有定义
console.log（shoppingCart[0]）；
console.log（shoppingCart[1]）；
console.log（shoppingC
fetch('scripts/products.json')
    .then(response => response.json())
    .then(data => { let fetchedData = [];
                    data.forEach( (item) => {fetchedData.push(item);});
                    sessionStorage.setItem('storeItems', JSON.stringify(fetchedData));
    });