使用getjson方法动态地从json中获取数据并循环这些值

Fetch data dynamically from json with get json method and loop the values

本文关键字：数据 循环 获取 方法 getjson 动态 json 使用      更新时间：2023-09-26

我有一个JSON文件，我想用JSON值创建一个动态html元素。下面是JSON文件:

{
    "india": [
        {
            "position": "left",
            "imgurl":"3.jpg"
        },
        {
            "position": "right",
            "imgurl":"2.jpg"
        },
        {
            "position": "left",
            "imgurl":"3.jpg"
        },
        {
            "position": "right",
            "imgurl":"2.jpg"
        }
    ],
    "aus": [
        {
            "position": "left",
            "imgurl":"4.jpg"
        },
        {
            "position": "right",
            "imgurl":"2.jpg"
        },
        {
            "position": "left",
            "imgurl":"3.jpg"
        },
        {
            "position": "right",
            "imgurl":"2.jpg"
        }
    ]
}
下面是HTML文件和Javascript代码: 
<html>
<head>
  <title>The jQuery Example</title>
  <script type = "text/javascript" 
  src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type = "text/javascript" language = "javascript">
   $(document).ready(function() {
    $("#driver").click(function(event) {
        $.getJSON('list1.json', function(data) {
            $.each(data.india, function (key, val) {
                $('.ms-left').append('<div class="ms-section '+val.position+'" id="left3"><img src="'+val.imgurl+'"></div>');
            });        
        });
    });
});
</script>
</head>      
<body>
  <p>Click on the button to load result.html file:</p>
  <div id = "stage" style = "background-color:#cc0;">
   STAGE</div>
<ul id="ul"></ul>
<div class="ms-left"></div>
<input type = "button" id = "driver" value = "india" />
<ul id="menu" class="">
    <li><a href="" data-value="india">India</a></li>
    <li><a href="" data-value="aus">Australia</a></li>
    <li><a href="" data-value="usa">USA</a></li>
</ul>       
</body>
</html>

我想为每个函数提供动态变量，即$.each(data.india) ..我想把印度改成AUS，美国动态意味着数据。印度,数据。这样.each将根据参数从JSON中创建和获取值。请帮助。

我如何将一个动态参数传递给.each循环，这将帮助我根据JSON中定义的国家获取数据?目前，我可以静态地更改数据。印度,数据。

我在上面的代码中有一个li结构。我的目的是当我点击印度的链接时，它会命中带有印度值的JSON文件并获得印度的数据，就像我点击AUS链接时，它会从JSON中获得AUS的数据。

@makemelive几个建议:

  • 把JS代码放在<body>标签的末尾，而不是在<head>里面。
  • 使用一致的缩进，无论是制表符还是空格，首选空格，因为它们是通用的。

这是你的问题的解决方案:

<html>
<head>
    <title>The jQuery Example</title>
</head>
<body>
    <div id="stage" style="background-color:#cc0;">STAGE</div>
    <div class="ms-left"></div>
    <ul id="menu" class="countries">
        <li><a href="#" data-value="india">India</a></li>
        <li><a href="#" data-value="aus">Australia</a></li>
        <li><a href="#" data-value="usa">USA</a></li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        var json = {
            "india": [
                {
                    "position": "left",
                    "imgurl": "3.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                },
                {
                    "position": "left",
                    "imgurl": "3.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                }
            ],
            "aus": [
                {
                    "position": "left",
                    "imgurl": "4.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                },
                {
                    "position": "left",
                    "imgurl": "3.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                }
            ]
        };
    </script>
    <script>
        var populate = function (country) {
            $('.ms-left').empty();
            $.each(json[country], function (key, value) {
                var _div = $('<div>')
                    .addClass('ms-section')
                    .addClass(value.position)
                    .append($('<img>').attr('src', value.imgurl));
                $('.ms-left').append(_div);
            });
        };
        $(document).ready(function() {
            /**
             * Get your JSON here and store it in a local variable,
             * loading the file for each case is not a good practice
             * if the file is always the same.
             */
            $('.countries a').each(function() {
                $(this).on('click', populate.bind(this, $(this).data('value')));
            });
        });
    </script>
</body>
</html>
相关文章：