使用get json方法从json动态获取数据并循环值

Question

我有一个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"
        }
    ]
}

以下是带有Javascript代码的HTML文件：

<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，美国则动态地表示data.india，data.aus等，以便.each可以.each创建和获取值JSON取决于参数。 请帮忙。

如何将动态参数传递给.each循环，这将帮助我根据JSON中定义的国家/地区获取数据？ 当前，我可以静态地更改data.india，data.aus来获取值，但我希望它是动态完成的。

我上面的代码中有一个li结构。 我的目的是，当我单击印度的链接时，它将单击具有印度值的JSON文件并获取印度的数据，就像我单击AUS链接时，它将从JSON获取AUS的数据一样。

Answer 1

@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>

使用get json方法从json动态获取数据并循环值

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-11 23:57:05

使用get json方法从json动态获取数据并循环值

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-11 23:57:05

解决方案1
1 已采纳 2016-10-11 23:57:05