Получить статический файл JSON из массива
Я студент и новичок в JS.
Мне нужна помощь в решении проблемы. У меня много информации, поэтому я хочу использовать статический файл JSON (json.data), содержащий массив. Как использовать выборку? Я проверил несколько примеров, но не понимаю, как заставить его работать с моим кодом. Я был бы очень благодарен за некоторую помощь, я застрял на этом неделю.
// Loop through all my properties to display info on page 2
let page2 = (hairdresser) => {
let singleView = "<div>";
for(prop in hairdresser){
if (hairdresser.hasOwnProperty(prop)){
singleView += `${hairdresser[prop]} </p>`;
}
}
singleView += "</div>"
document.body.innerHTML = singleView;
}
// handleData function for page 1
let handleData = (hairdressers) => {
let out = "<table>";
hairdressers.forEach((hairdresser, index) => {
out += "<tr>";
const printableProps = ["time", "name", "price", "timeEst", "rating", "adress"];
printableProps.forEach(prop => {
if (hairdresser.hasOwnProperty(prop)) {
let isName = prop === "name";
out += `<td>
${isName ? `<a href = "#" onclick='page2(${JSON.stringify(hairdresser)})'}>` : ""}
${hairdresser[prop]}
${isName ? '</a>' : ""}
</td>`;
}
});
out += "</tr>";
})
out += "</table>";
document.body.innerHTML = out;
}
fetch("/path/to/data.json").then(res => res.json()).then(handleData);
**My JSON file:**
[
{
"name" : "Sax & Fön",
"adress" : "Rådmansgatan 46",
"zip" : "113 57 Stockholm",
"time" : "12",
"tel" : "08-522 389 20",
"site" : "www.salongweb.se",
"rating" : "(32)",
"price" : "320 kr",
"timeEst" : "30 min",
"open" : "Öppet till 19.00 idag",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
},
{
"name" : "Hårley Davidson",
"adress" : "Rådmansgatan 45",
"zip" : "113 57 Stockholm",
"time" : "12",
"tel" : "08-522 389 20",
"site" : "www.salongweb.se",
"rating" : "(32)",
"price" : "320 kr",
"timeEst" : "30 min",
"open" : "Öppet till 19.00 idag",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
}
]Вы можете найти "Ajax", если вам нужно получить внешние данные с помощью javascript.
Вы можете рассказать нам, в чем проблема? Вы что-то пробовали, но ничего не вышло? Если да, расскажите, что вы пробовали и что произошло. Если вы даже не знаете, с чего начать, что вас смущает? Какие конкретные вопросы у вас есть по поводу рассмотренных вами примеров?
@ Эрика, что не сработало с приведенной выше строкой fetch ()? Пока содержимое этого файла data.json идентично тому, что вы разместили в переменной data выше (и этот файл доступен везде, где вы запускаете этот JS), эта строка выборки должна работать.
Смотрите мою правку выше, вот как я пытался это сделать. Возможно, чего-то не хватает в файле JSON или в коде.
@Erika проверьте консоль разработчика (если вы находитесь в браузере) на наличие сетевых ошибок и т. д. Она должна, по крайней мере, показать, что выборка работает (или не работает). Знание этого статуса должно помочь вам сузить круг вопросов. Надеюсь, это поможет!
Я вижу в консоли, что выборка не работает. Он говорит, что сервер не находит URI. (fetch ("/ path / to / data.json"). then (res => res.json ()). then (handleData);)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
fetch('https://api.myjson.com/bins/176t5e')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
handleData(myJson);
});
Старый ответ Вы можете использовать XMLHttpRequest.
Создайте новый экземпляр XMLHttpRequest и вызовите функцию handleData внутри onreadystatechange.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
handleData(JSON.parse(xhttp.responseText));
}
};
xhttp.open("GET", "yourJson.json", true);
xhttp.send();
Я загрузил ваши данные json здесь. И образец примера.
OP запрашивает информацию для Fetch API («Как использовать fetch?»), Который постепенно заменяет XMLHttpRequest () developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fet ch в качестве рекомендуемого подхода.
@BigBlueHat ты прав. я прошу прощения и обновил свой ответ.
Что вы имеете в виду мои данные
fetch? Вы хотите, чтобы JS читал файл с жесткого диска вместо жесткого кодирования? JS не имеет прямого доступа к локальному диску, если явно не дано разрешение. Эта ссылка может быть полезной: stackoverflow.com/questions/7346563/loading-local-json-file