Как вы импортируете JSON файл в JavaScript?

У меня есть файл JSON с контентом

{"name" : "Conrad", "info" : "tst", "children" : [
    {"name" : "Rick" },
    {"name" : "Lynn" },
    {"name" : "John", "children": [
        {"name" : "Dave", "children": [
            {"name" : "Dave" },
            {"name" : "Chris" }      
        ]},
        {"name" : "Chris" }
    ]}
  ]};

Я хочу импортировать данные JSON файла внутри файла JavaScript и иметь конечный результат, например

var treeData ={"name" : "Conrad", "info" : "tst", "children" : [
        {"name" : "Rick" },
        {"name" : "Lynn" },
        {"name" : "John", "children": [
                {"name" : "Dave", "children": [
                {"name" : "Dave" },
                {"name" : "Chris" }

         ] },
                {"name" : "Chris" }
         ]}
  ]};

Я пробовал много примеров кода, но никто не работал.

Ответы

Ответ 1

Разберите содержимое файла следующим образом:

var treeData = JSON.parse(fileContent);

Вы не описываете, как вы получаете файл, но можете загрузить его с сервера с помощью простого XMLHttpRequest. Вот для этого полезный ресурс: Использование XMLHttpRequest

Выдержка из ссылки с изменениями:

var treeData;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

function reqListener(e) {
    treeData = JSON.parse(this.responseText);
}

Обновить на основе комментариев ниже:

Вы не можете загрузить файл с помощью JSON.parse(). Эта функция способна преобразовывать существующую строку в объект (если контент находится в допустимом формате JSON).

Вам необходимо:

  • Загрузите файл с вашего сервера в переменную, используя, например, AJAX (как показано). Из-за соображений безопасности вы не можете использовать локальный путь к файлу. Настройте локальный сервер для запуска вашей страницы, например, бесплатный легкий веб-сервер Mongoose. Это позволит вам указать корень в вашу локальную папку, а затем загрузить свою страницу с помощью http://localhost/

  • Когда файл загружен, вы можете передать содержимое функции JSON.parse(). В приведенном выше примере показан весь процесс. Просто замените ссылки на фактические в вашем коде.

(PS: если вы хотите, чтобы решение jQuery не задевало ваш вопрос тегом jQuery)

Ответ 2

Как насчет $.getJSON

$.getJSON( "yourjsonfile.json", function( data ) {  
    console.log( "JSON Data: " + data);
    $.each( data, function( key, val ) {
        console.log(key + "value:: " + val );
    });
});

Ссылка: http://api.jquery.com/jquery.getjson/

Ответ 3

Сделайте запрос AJAX вашего JSON файла, затем используйте JSON.parse, чтобы добавить результат в treeData.

var treeData = JSON.parse(ajaxFunction('jsonfile.php'));

Что-то в этом отношении... (он будет зависеть от вашей функции AJAX)

Ответ 4

Если кто-то использует GULP, то вот как вы можете решить:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    insert = require('gulp-insert');

gulp.task('jsonConcat', function() {
  return gulp.src(['path/to/json/your-file.json'])
    .pipe(insert.prepend('treeData = '))
    .pipe(insert.append(';'))
    .pipe(concat('final-result.js'))
    .pipe(gulp.dest('path/to/destination/'));
});