JSON+Javascript/jQuery.如何从json文件导入数据并解析？

eivgtgni 于 2023-01-14 发布在 Java

关注(0)|答案(7)|浏览(167)

如果我有一个名为names.json的JSON文件，其中：

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

我如何在javascript中使用它的内容？

JSON

来源：https://stackoverflow.com/questions/10490473/jsonjavascript-jquery-how-to-import-data-from-a-json-file-and-parse-it

7条答案

按热度按时间

pw136qt21#

以下是如何执行此操作的示例：

<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）举报 2023-01-14

htrmnn0y2#

您只需在HTML中包含一个Javascript文件，将JSON对象声明为变量，然后就可以使用data.employees从全局Javascript作用域访问JSON数据。
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）举报 2023-01-14

xpcnnkqh3#

您的JSON文件不包含有效的JSON。请尝试以下操作。

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

然后您应该会看到响应。查看http://jsonlint.com/

赞(0）回复(0）举报 2023-01-14

nc1teljy4#

在jQuery代码中，应该有employees属性。

data.employees[0].firstName

所以会是这样的。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $.getJSON("names.json", function(data) {
        console.log(data);
        $('body').append(data.employees[0].firstName);
    });
</script>
</body>
</html>

当然，对于非jQuery版本，您也需要该属性，但是您需要首先解析JSON响应。
还要记住，document.write会破坏整个页面。
如果仍然有问题，请尝试完整的$.ajax请求，而不是$.getJSON Package 器。

$.ajax({
        url: "names.json",
        dataType: "json",
        success: function(data) {
            console.log(data);
            $('body').append(data.employees[0].firstName);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('ERROR', textStatus, errorThrown);
        }
    });

http://api.jquery.com/jquery.ajax/

赞(0）回复(0）举报 2023-01-14

55ooxyrt5#

我知道答案很久以前就给出了，但这个结果显示在谷歌的第一位。
但是我不想使用jquery，所以在普通JS中，I found this quick tutorial比senornestor answer干净（它还允许根据变量加载文件）：

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();

在你的html文件上：

`<script src="myscript.js"></script>`

赞(0）回复(0）举报 2023-01-14

ezykj2lf6#

要在没有jQuery的情况下实现这一点，可以使用Fetch API。截至2023年1月，约96%的浏览器支持Fetch API。

fetch("test.json").then(async (resp) => {
  const asObject = await resp.json();
  console.log(asObject);
})

赞(0）回复(0）举报 2023-01-14

g0czyy6m7#

如果你想使用PHP.

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

    //use obj
</script>

可选地，异步使用它：

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

PHP：

<?php
    $filename = $_GET['file'] . '.json';
    $data['contents'] = file_get_contents($filename);
    echo json_encode($data);
?>

赞(0）回复(0）举报 2023-01-14

我来回答

JSON+Javascript/jQuery.如何从json文件导入数据并解析？

7条答案

相关问题

热门标签

最新问答