2017-01-20 3 views
1

Я делаю веб-приложение, и мне нужно получить данные из файлов JSON и распечатать их в виде таблицы. Проблема в том, что я получаю ошибку 404, файл JSON (фактически я работаю на локальном компьютере и делаю Node.js).JSON get and show on html page

Edit 1:
, глядя на вкладку я получаю, чтобы увидеть ошибку 404 сети. файл JSON находится в text/file.json, а index.ejs - в views/index.ejs. Поэтому мой вопрос заключается в том, что я не могу получить какие-либо данные при попытке получить JSON-файл (не нашел его).

приложение размещено на локальном сервере, созданном с узлом node.js и выражением.

дерево из моих файлов

  • текст/allfiles.json
  • общественности/
  • маршруты/index.js
  • просмотров/index.ejs
  • app.js

Вот мои файлы: index.ejs

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(function() { 
     $.getJSON("/text/global_summary.json", function(data) { 
      console.log("JSON Data opened"); 
      $.each(data, function(i, field) { 
       var tblRow = "<tr>" + "<td>" + field.topic + "</td>" + 
        "<td>" + field.page + "</td>" 
       $(tblRow).appendTo("#userdata tbody"); 
      }); 

     }); 
    }); 
</script> 
. 
. 
. 
<div class="container"> 
    <table id= "userdata" border="2"> 
    <thead> 
    <tr> 
     <th data-field="id">Topic</th> 
     <th data-field="name">Page</th> 
    </tr> 
    </thead> 

    <tbody> 
    </tbody> 
    </table> 
</div> 

мой файл JSON

[{"topic": "INTRODUCTION", "page": 8}, {"topic": "THE UNIVERSE", "page": 10}] 

спасибо.

+0

Вы пытались нажать f12 в браузере и посмотреть вкладку сети? –

+0

Где ваш индексный файл относительно вашего json-файла? –

+0

В чем вопрос? – Christopher

ответ

0

Похоже, проблема в том, что вы фактически не используете json-файл. Когда ваш код вызывает $.getJSON("/text/global_summary.json"...);, браузер не знает, откуда взять файл, он просит ваш сервер отправить этот файл. Ваш сервер тоже не знает, поэтому он просто говорит «ошибка 404», что означает «я не знаю».

Итак, вы должны сообщить серверу, как служить этому статическому файлу. Поскольку вы используете экспресс, это очень просто. Просто добавьте

app.use('/text', express.static('text')) 

в файл app.js и в любое время ваш сервер получает запрос на какой-либо «/text/somefile.extension» будет пытаться найти его в текстовой папке. Существует очень хорошее описание того, как обслуживать файлы таким образом: https://expressjs.com/en/starter/static-files.html.

+0

спасибо за объяснение, теперь она работает. –

0

Try добавления основания к головному тегу:

<base href="http://localhost/" target="_blank"> 

Если вы все еще сталкиваются 404 разместить заголовок запроса здесь.

0

Я бы проверял, можете ли вы просмотреть/загрузить файл json, поместив его url прямо в окно url браузера.

Если это не сработает (404 настоятельно рекомендует это), ваше экспресс-приложение не служит json-файлу, и вам нужно либо добавить статический файл, либо добавить маршрут для json-файла.

Также: ваше приложение размещено в корневом каталоге веб-сервера? Потому что URL-адрес начинается с/adresses файлов в корневом каталоге веб-сервера.