получить статический JSON-файл из массива - PullRequest
Новая
       28

получить статический JSON-файл из массива

0 голосов
/ 18 мая 2018

Я студент и новичок в JS.

Мне нужна помощь, чтобы решить проблему.У меня много информации, поэтому я хочу использовать статический файл JSON (json.data) вместо массива.Как мне использовать fetch?Я проверил несколько примеров, но не понимаю, как заставить это работать с моим кодом.Я был бы очень благодарен за некоторую помощь, я застрял на этом в течение недели.

// 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"
    }
]

1 Ответ

0 голосов
/ 18 мая 2018

Пример извлечения . 

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 здесь .И Пример образца .

...