数组没有获取长度但将对象放入内部

所以我试图从JSON文件制作对象的轮播,我的意图是 具有由JSON文件动态创建的数组(因此,如果我在JSON文件中有5个对象 并需要添加一些,我只是将其放到那里,并将其发送到网站)。 现在,我从JSON文件中获取对象,并将其推送到数组中。 数组肯定是在获取对象,但是当我登录id时,它只是说“ []”,当我单击时 实际上,它具有所有对象。现在我需要访问这些对象,以便我可以 用户单击按钮时会弹出()和shift(),但我无法访问这些对象? 我尝试了console.log(arr [0])或其他索引,但始终返回未定义。

的HTML


let arr = [];

class Projects {
    async getProjects(){
        try {
            let result = await fetch("projects.json");
            let data = await result.json();
            let projects = data.projects;
            projects = projects.map(project => {                
                const {id} = project;
                const {name} = project;
                const {url} = project;

                arr.push(project)
                return {id, name, url};
            });

            return projects;
        } catch(error) {
            console.log(error);

        }


    }
}
console.log(arr);

JSON格式

{
    "projects": [
        {
            "id": "",
            "name": "",
            "url": "./images/Backgrounds/background.jpg"
        },

        {
            "id": "",
            "name": "",
            "url": "./images/Backgrounds/background2.png"
        }
    ]
}

console.log

[]
0: {id: "", name: "", url: "./images/Backgrounds/background.jpg"}
1: {id: "", name: "", url: "./images/Backgrounds/background2.png"}
2: {id: "", name: "", url: "./images/Backgrounds/background3.jpg"}
3: {id: "", name: "", url: "./images/Backgrounds/background4.jpg"}
4: {id: "", name: "", url: "./images/Backgrounds/background6.jpg"}
5: {id: "", name: "", url: "./images/Backgrounds/background7.jpg"}
length: 6__proto__: Array(0)

我在这里缩短了json文件,因此它不会占用太多空间。