Loading local JSON file

前端 未结 23 1600
悲哀的现实
悲哀的现实 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)
提交回复
热议问题