Как разобрать файл локального JSON

У меня есть JSON файл jsquiz.json, который содержит:Как разобрать файл локального JSON

{ 
"firstname": "Kane", 
"secondname": "Brown", 
"sports": ["basketball","hockey"] 
}

У меня есть отдельный файл в том же каталоге jsquiz.html, где я хотел бы информацию из файла JSON, который будет отображаться:

... 
<ul> 
    <li id="first"></li> 
    <li id="last"></li> 
    <li id="sport1"></li> 
    <li id="sport2"></li> 
</ul> 
...

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

Любая помощь приветствуется,

Благодаря

источник

2014-01-20 Kane

Вы пробовали что-нибудь? –

Я даже не знаю, с чего начать с файла JSON. В первый раз мне удалось использовать литерал объекта во внешнем файле javascript. – Kane

Извлеките файл с помощью AJAX, а затем проанализируйте его содержимое с помощью 'JSON.parse()'. Затем вы можете вставить все значения в свой шаблон и добавить его в DOM. – Sirko

Вы можете загрузить данные из файла JSON, используя XMLHttpRequest.

Этот пример будет блокировать до тех пор, пока не будет загружен:

var yourJSONObject = {} // will later be filled with the data 
var req = new XMLHttpRequest(); 
req.open('GET', 'http://www.example.com/jsquiz.json', false); 
req.send(null); 
if(req.status == 0) 
    yourJSONObject = JSON.parse(req.responseText); 
}

Этот пример будет загружаться в фоновом режиме:

var yourJSONObject = {} // will later be filled with the data 
var req = new XMLHttpRequest(); 
req.open('GET', 'http://www.example.com/jsquiz.json', true); 
req.onreadystatechange = function (aEvt) { 
    if (req.readyState == 4) { 
     yourJSONObject = JSON.parse(req.responseText); 
    } 
}; 
req.send(null);

К сожалению, не все браузеры позволяют XMLHttpRequest к местным файлам по умолчанию. Некоторым браузерам может потребоваться небольшое изменение конфигурации, чтобы его можно было убедить.

источник

2014-01-20 09:24:22 Philipp

Вы можете запросить файл с помощью AJAX, пока он находится в вашем веб-каталога (с JQuery)

$.ajax({url: "jsquiz.json",}) 
    .done(function(response) { 
    data = JSON.parse(response); 
    console.log(data); 
    });

Тогда у вас есть только создайте новый элемент DOMElement и добавьте его.

источник

2014-01-20 09:22:53 henje

Кажется, вы используете какую-то библиотеку.Учитывая, что ОП не упоминает какие-либо библиотеки, вы должны указать, какой из них необходим для использования этого примера. – Philipp

сразу после того, как я опубликовал, я узнал это сам и добавил, что использует JQuery, но спасибо за напоминание. – henje

изменить файл JSON, чтобы быть действительным JS переменным:

var jsonData = { 
"firstname": "Kane", 
"secondname": "Brown", 
"sports": ["basketball","hockey"] 
}

затем на странице:

<script src="jsquiz.json"></script>

сейчас на странице после ее загрузки вы можете использовать переменную nameed jsonData

источник

2014-01-20 09:23:50 Exlord

Будет ли это считаться JSON? Разве это не просто объектный литерал? – Kane

, когда вы загружаете файл js, содержимое загружается так, как есть. Yes jsonData - объект JSON. – Exlord

Этот шаблон обычно называют «JSONP» (JSON с дополнением). Очень опасно загружаться из источника, которого вы не контролируете, но это безопасно, когда вы доверяете источнику. – Philipp

Проблема в том, что вы не можете легко обращаться к локальным файлам. Вы должны либо включить этот файл на страницу (например, Exlord says), либо экспортировать его через HTTP с помощью какого-либо веб-сервера и загрузить его с помощью jQuery (например, henje) или напрямую (например, Philipp).

Если у вас есть Python вы можете экспортировать файл с помощью:

python -m SimpleHTTPServer 8000

(другие инструменты могут помочь вам здесь также).

источник

2014-01-20 09:23:55

Как разобрать файл локального JSON

ответ

Смежные вопросы