Question

我在本地系统中保存了一个JSON文件并创建了一个Javascript文件，以便读取JSON文件并打印出数据。这是JSON文件：

[
{"Titel":"a", 
    "Timestamp":"2017-05-18 22:11",
    "Text":"a", 
    "img":"a.jpg",
    "FullText":"a"
},
{"Titel":"b",
    "Timestamp":"2017-08-08 22:11",
    "Text":"b",
    "img":"b.jpg",
    "FullText":"b" }]

让我们说这是它带你到JSON文件的路径：

../news_data.json

有没有人可以帮我编写一段简单的代码来读取JSON文件并在Javascript中打印其中的数据。我是Javascript的新手，需要一些简单的东西。非常感谢您的协助。

Answer 1

这是一种没有jQuery的方法。

首先创建此功能：

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', '../news_data.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}

然后你可以通过简单地调用这样的东西来使用它：

loadJSON(function(json) {
  console.log(json); // this will log out the json object
});

我通过谷歌搜索＆＃34;读取本地json文件javascript＆＃34; （source）

Answer 2

您可以在jquery

中使用jQuery.getJSON()

首先添加jquery CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

现在将完整的json文件路径设置为ex： - folder / file.json

描述：使用GET HTTP请求从服务器加载JSON编码的数据。

$.getJSON( "JSON FILE PATH", function( data ) {

    console.log(data); //json output 
});

DEMO

＆＃13;

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

＆＃13;

 img {
    height: 100px;
    float: left;
  }

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="images"></div>

</body>
</html>

＆＃13;

将本地JSON文件读入变量

2 个答案:

您可以在jquery