发表新帖
发表新帖

JSON+Javascript/jQuery. How to import data from a json file and parse it?

前端 未结
关注
7 1998
猫巷女王i
猫巷女王i 2021-01-31 19:12

If I have a JSON file named names.json with:

{\"employees\":[
    {\"firstName\":\"Anna\",\"lastName\":\"Meyers\"},
    {\"firstNam
相关标签:
7条回答
  • 忘了有多久
    2021-01-31 19:42

    If you want to use PHP.

    <?php
    $contents = file_get_contents('names.json');
?>
<script>
    var names = <?php echo $contents; ?>
    var obj = JSON.parse(names);

    //use obj
</script>

    Optionally, use it async:

    <script>
    $(document).ready(function(){
        $.get("get_json.php?file=names",function(obj){
            //use obj here          
        },'json');
    });
</script>

    The PHP:

    <?php
    $filename = $_GET['file'] . '.json';
    $data['contents'] = file_get_contents($filename);
    echo json_encode($data);
?>
    0 讨论(0)
  • 耶瑟儿～
    2021-01-31 19:43

    I know the answer was given a long time ago, but this result is showing in first position on google.

    However I don't want to use jquery, so in vanilla JS , I found this quick tutorial cleaner than senornestor answer (it also allow to load files depending on a variable) :

    function loadJSON(filelocation, callback) {   

  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', filelocation, true); // Replace 'my_data' with the path to your file
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
    }
  };
  xobj.send(null);  
}

function init() {
  var location = "myfile.json";
  loadJSON(filelocation=location,  function(response) {
    // Parse JSON string into object
    loadedJSON = JSON.parse(response);
    console.log(loadedJSON.somethingsomething);
  });
}

init();

    and on your html file:

    `<script src="myscript.js"></script>`
    0 讨论(0)
  • 离开以前
    2021-01-31 19:51

    An example how to do this could be:

    <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.getJSON('names.json',function(data){
            console.log('success');
            $.each(data.employees,function(i,emp){
                $('ul').append('<li>'+emp.firstName+' '+emp.lastName+'</li>');
            });
        }).error(function(){
            console.log('error');
        });
    });
</script>
</head>
<body>
    <ul></ul>
</body>
</html>
    0 讨论(0)
  • 一个人的身影
    2021-01-31 19:55

    You can simply include a Javascript file in your HTML that declares your JSON object as a variable. Then you can access your JSON data from your global Javascript scope using data.employees, for example.

    index.html: 

    <html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

    data.js:

    var data = {
  "employees": [{
    "firstName": "Anna",
    "lastName": "Meyers"
  }, {
    "firstName": "Betty",
    "lastName": "Layers"
  }, {
    "firstName": "Carl",
    "lastName": "Louis"
  }]
}
    0 讨论(0)
  • 深忆病人
    2021-01-31 19:57

    Your JSON file does not contain valid JSON. Try the following instead.

     {
     "employees": 
     [
         {
             "firstName": "Anna",
             "lastName": "Meyers"
         },
         {
             "firstName": "Betty",
             "lastName": "Layers"
         },
         {
             "firstName": "Carl",
             "lastName": "Louis"
         }
     ]
 }

    You should then see a response. Check out http://jsonlint.com/

    0 讨论(0)
  • 难免孤独
    2021-01-31 19:57

    For those sent here by Google after the fall of JQuery, use Fetch API

    fetch("test.json").then(async (resp) => {
  const asObject = await resp.json();
  console.log(asObject);
})
    0 讨论(0)
 看不清?
提交回复
热议问题