Загрузка локального файла JSON - PullRequest
Новая
       87

Загрузка локального файла JSON

281 голосов
/ 08 сентября 2011

Я пытаюсь загрузить локальный файл JSON, но он не будет работать.Вот мой код JavaScript (с использованием jQuery: 

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

Файл test.json: 

{"a" : "b", "c" : "d"}

Ничего не отображается, и Firebug сообщает мне, что данные не определены.json.responseText и это хорошо и правильно, но странно, когда я копирую строку: 

 var data = eval("(" +json.responseText + ")");

в консоли Firebug, она работает, и я могу получить доступ к данным.

У любого есть решение

Ответы [ 22 ]

4 голосов
/ 14 октября 2013

Нашел эту ветку при попытке (безуспешно) загрузить локальный файл json. Это решение сработало для меня ... 

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... и используется вот так ... 

load_json("test2.html.js")

... а это <head> ... 

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
4 голосов
/ 13 марта 2019

В TypeScript вы можете использовать импорт для загрузки локальных файлов JSON. Например загрузка font.json: 

import * as fontJson from '../../public/fonts/font_name.json';

Для этого требуется флаг tsconfig --resolveJsonModule: 

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Для получения дополнительной информации см. Примечания к выпуску машинописного текста: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

3 голосов
/ 06 апреля 2016

В angular (или любом другом фреймворке) вы можете загрузить с помощью http get. Я использую его примерно так: 

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

Надеюсь, это поможет.

2 голосов
/ 23 мая 2014 
$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });
1 голос
/ 08 сентября 2011

Если вы используете локальный массив для JSON - как вы показали в своем примере в вопросе (test.json), тогда вы можете использовать parseJSON метод JQuery -> 

  var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON используется для получения JSON с удаленного сайта - он не будет работать локально (если вы не используете локальный HTTP-сервер)

0 голосов
/ 26 апреля 2016

Если у вас установлен Python на вашем локальном компьютере (или вы не против его установить), вот независимый от браузера обходной путь для локальной проблемы доступа к файлу JSON, который я использую:

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

Вот вам код Python 

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')
0 голосов
/ 24 февраля 2018

Для меня сработало следующее:

Ввод: 

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

Код Javascript: 

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>
0 голосов
/ 22 декабря 2017 
function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

То, что я сделал, было, прежде всего, на вкладке сети, записать сетевой трафик для службы, а из тела ответа скопировать и сохранить объект json в локальном файле.Затем вызовите функцию с локальным именем файла, вы должны увидеть объект json в jsonOutout выше.

0 голосов
/ 02 сентября 2017 

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

Я сделал это для своего приложения cordova, как будто я создал новый файл javascript для JSON и вставил данные JSON в String.raw, а затем проанализировал его с помощью JSON.parse

0 голосов
/ 24 июля 2017

Вы можете поместить свой JSON в файл JavaScript.Это можно загрузить локально (даже в Chrome) с помощью функции jQuery getScript().

map-01.js file: 

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js 

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

output: 

world width: 500

Обратите внимание, что переменная json объявлена ​​и назначена в файле js.

Страница:
...