发表新帖
发表新帖

Loading local JSON file

前端 未结
关注
23 1636
悲哀的现实
悲哀的现实 2020-11-22 01:28

I\'m trying to load a local JSON file but it won\'t work. Here is my JavaScript code (using jQuery):

var json = $.getJSON("test.json");
var data = e
相关标签:
23条回答
  • 借酒劲吻你
    2020-11-22 01:55

    Found this thread when trying (unsuccessfully) to load a local json file. This solution worked for me...

    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)
}

    ... and is used like this...

    load_json("test2.html.js")

    ...and this is the <head>...

    <head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
    0 讨论(0)
  • 余生分开走
    2020-11-22 01:56

    $.getJSON is asynchronous so you should do:

    $.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
    0 讨论(0)
  • 别跟我提以往
    2020-11-22 01:58

    I can't believe how many times this question has been answered without understanding and/or addressing the problem with the Original Poster's actual code. That said, I'm a beginner myself (only 2 months of coding). My code does work perfectly, but feel free to suggest any changes to it. Here's the solution: 

    //include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

    Here's a shorter way of writing the same code I provided above:

    var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

    You can also use $.ajax instead of $.getJSON to write the code exactly the same way:

    var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

    Finally, the last way to do this is to wrap $.ajax in a function. I can't take credit for this one, but I did modify it a bit. I tested it and it works and produces the same results as my code above. I found this solution here --> load json into variable

    var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

    The test.json file you see in my code above is hosted on my server and contains the same json data object that he (the original poster) had posted. 

    {
    "a" : "b",
    "c" : "d"
}
    0 讨论(0)
  • 醉酒成梦
    2020-11-22 01:58

    You can put your json in a javascript file. This can be loaded locally (even in Chrome) using jQuery's getScript() function.

    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

    Notice that the json variable is declared and assigned in the js file.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-11-22 01:59

    In a more modern way, you can now use the Fetch API:

    fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

    All modern browsers support Fetch API. (Internet Explorer doesn't, but Edge does!)

    source:

    • Using Fetch

    • Fetch in Action

    • Can I use...?

    0 讨论(0)
 看不清?
提交回复
热议问题