Данные JSON не отображаются из-за синтаксической ошибки ⇐ CSS

[Anonymous]

Код: Выделить всё

Florida Tempatations
[*]








[url=index.html]
[img]logo.png[/img]
[/url]

[list]
HOME
[*]ATTRACTIONS
[*]ABOUT US
[/list]

index.html^^

Код: Выделить всё

fetch('attractions.json')
.then(response => response.json())
.then(data => {
const list = document.querySelector('attractions');
data.forEach(attraction => {
const item = document.createElement('li');
item.innerHTML = `${attraction.name}
Location: ${attraction.location}
Category: ${attraction.category}
`;
list.appendChild(item);
});
})
.catch(error => {
console.error('Error:', error);
});

script.js

Код: Выделить всё

{ "attractions":[
{
"name": "Walt Disney World",    "location": "Orlando",    "category": "Theme Park"
},
{
"name": "Universal Studios Florida",    "location": "Orlando",    "category": "Theme Park"
},
{    "name": "Kennedy Space Center",    "location": "Cape Canaveral",    "category": "Science and Technology"
},
{"name": "South Beach",    "location": "Miami",    "category": "Beach"
},
{    "name": "Everglades National Park",    "location": "Homestead",    "category": "National Park",
}
]
}

attractions.json^^

Код: Выделить всё

*{
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url('back.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}

nav{
justify-content: space-between;
align-items: center;
display: flex;
padding: 1% 2%;
}

nav img{
text-align: right;
flex: 1;
}

.nav-links ul li{
padding: 8px 12px;
position: relative;
list-style: none;
display: inline-block;
}

.nav-links ul li a{
text-decoration: none;
font-size: 24px;
color: #fff;
}

.nav-links ul li::after{
content: '';
width: 0%;
height: 4px;
display: block;
margin: auto;
background: #e7902c;
transition: .25s;
}

.nav-links ul li:hover::after{
width: 100%;
}

style.css^^
По сути, я пытаюсь отобразить это на своем веб-сайте, но не понимаю, почему оно не отображается. Я попробовал свой код выборки JSON, и он работает после того, как я провел несколько тестов, но я не уверен, что с ним не так, потому что он не отображается. У меня есть синтаксическая ошибка, но я не знаю, где именно, поэтому буду признателен, если кто-нибудь сможет мне с этим помочь. Я все еще изучаю HTML, CSS и JSON (это мой первый раз). Извините, если это глупый вопрос.
Ошибка:

Ошибка: Ошибка: SyntaxError
{}https://fd7ab24b-cc13-4b1d-9bf6-51305c5 ... ools.js:74
в t.formatMsg
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5 ... js:74:4990) в новом e
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5 ... js:74:1632) в t.insertSync
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5 ... s:97:17121)
at
https://fd7ab24b-cc13-4b1d-9bf6-51305c5 ... s:97:18724


Подробнее здесь: https://stackoverflow.com/questions/751 ... ntax-error