如何使用jQuery从外部JSON文件加载数据?

时间:2020-06-12 10:26:37

标签: javascript jquery arrays json ajax

这是我的app.js文件

$(document).ready(function () {
        $.getJSON("http://localhost:3000/db.json", function (data) {

        $(data.as).each(function (index, value) {

            console.log(value);
        });
    });
});

这是db.json文件

{
  "as": [
    {
      "imageID": "1",
      "imageSource": "Popular Science 1",
      "alt": "Science 1"
    },
    {
      "imageID": "2",
      "imageSource": "Popular Science 2",
      "alt": "Science 2"
    }
  ]
}

例如仅如何获取Popular Science 2? 如果我写console.log(value[1]);,则会显示错误。如何索引数组?

1 个答案:

答案 0 :(得分:1)

您可以简单地使用:

value.imageSource

value是此处的对象。

const data = {as:[{imageID:"1",imageSource:"Popular Science 1",alt:"Science 1"},{imageID:"2",imageSource:"Popular Science 2",alt:"Science 2"}]};

$(data.as).each(function(index, value) {
  console.log(value.imageSource);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


如果只需要Popular Science 2,则无需循环。您可以轻松做到:

const data = {as:[{imageID:"1",imageSource:"Popular Science 1",alt:"Science 1"},{imageID:"2",imageSource:"Popular Science 2",alt:"Science 2"}]};

console.log( data.as[1].imageSource );

或者,通过以下验证:

const data = {as:[{imageID:"1",imageSource:"Popular Science 1",alt:"Science 1"},{imageID:"2",imageSource:"Popular Science 2",alt:"Science 2"}]};

// Vlidating that we actually have an array and data as index 1
if( data && data.as && data.as.length > 1){ 
  console.log( data.as[1].imageSource );
}

相关问题