Блог

Главная - Вопросы по программированию - Скрипт JavaScript не будет загружать содержимое файла JSON для обработки

Скрипт JavaScript не будет загружать содержимое файла JSON для обработки

#javascript #json #mustache

Вопрос:

Я пытаюсь загрузить файл JSON в скрипт JavaScript для использования в скрипте усов на веб-странице. JSON в строке загружается правильно, но тот же JSON в файле загружается неправильно.

Это работает:

 function renderHello() {
  var json = JSON.parse('{"cloudy": "This applies to Snowflake.","classic": "This applies to SQL Server."}');
  var template = document.getElementById("template").innerHTML;
  var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = rendered;
}

Это не работает:

 function renderHello() {
  var json = JSON.parse('./abc.json');
  var template = document.getElementById("template").innerHTML;
  var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = rendered;
}

Варианты, которые я пробовал в abc.json:

 {
    "cloudy": "This applies to Snowflake.",
    "classic": "This applies to SQL Server."
}
 
 {"cloudy": "This applies to Snowflake.","classic": "This applies to SQL Server."}

Я безуспешно пытался

var json = './abc.json';

var json = JSON.parse('./abc.json');

var json = JSON.stringify('./abc.json');

var json = JSON.parse(JSON.parse('./abc.json'));

var json = JSON.parse(JSON.stringify('./abc.json'));

Часто подобная ошибка возвращается в инструментах разработчика Chrome:

 VM223:1 Uncaught SyntaxError: Unexpected token . in JSON at position 0
    at JSON.parse (<anonymous>)
    at renderHello (render.js:2)
    at onload (docs.html:91)

Я добавил эти строки в скрипт, чтобы показать расположение файла веб-сайта, который включает шаблон усов, поэтому я знал, где найти abc.json:

    var loc = window.location.pathname;
   var dir = loc.substring(0, loc.lastIndexOf('/'));
   console.log(dir)

И структура файла теперь такая:

каталог

—file-with-mustache-script.html

—abc.json

Это может быть неуместно, но это сценарий усов, который, конечно, уже работает с JSON в виде строки.

   <body onload="renderHello()">
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
      Hello {{ cloudy }}, {{ classic }}!
    </script>
  </body>

Инструмент создания веб-сайта, который я использую, не поддерживает узлы или рули.

Если это вообще имеет значение, цель состоит в том, чтобы заполнить значения из файла JSON на странице веб-сайта документации по продукту, чтобы указать, какие пункты применимы к какой версии продукта.

Комментарии:

1. JSON.parse принимает строку JSON, а не путь к файлу. поэтому вам придется загрузить его с помощью механизма ajax.

2. Какой должна быть допустимая строка JSON './abc.json' ? Если вы хотите загрузить файл (возможно, с веб-сервера), вам необходимо выполнить веб-запрос, а затем проанализировать результат этого веб-запроса (или использовать библиотеку, которая автоматически анализирует результат).

Ответ №1:

Вам нужно загрузить содержимое файла через «AJAX». Вы не можете получить контент так, как вы пытаетесь сделать.

Комментарии:

1. Это сработало немедленно. Я ценю ваше время, чтобы помочь мне.

Ответ №2:

Что-то вроде этого сделало бы эту работу:

 function renderHello() {
  
 fetch('https://jsonplaceholder.typicode.com/users/3').then(r=>r.json())
 .then(json=>{
  // var template = document.getElementById("template").innerHTML;
  // var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = JSON.stringify(json,null,2);
 })
}
renderHello(); 
 <pre id="target"></pre>

Поскольку у меня нет доступа к вашему abc.json файлу, я использовал общедоступный ресурс по адресу http://typicode.com.

Метки: