Question

我已经有了一个json文件的结构，我想要做的是遍历数据，这样我就可以设置我的HTML样式并让它以这种格式打印输出。

第一类＆gt; 第一视频＆gt; linkto240p linkto360p linkto480p linkto720p

第二视频＆gt; linkto240p linkto360p linkto480p linkto720p

这是我的data.json文件以及我现在对HTML文件所做的工作。

{
    "category": {
        "description": "The First Category",
        "subcategories": {
		
            "media": [{
                "durationFormattedMinSec": "1h 5m 37s",
                "files": [
                    {
                        "filesize": "230772320",
                        "label": "240p",
                        "progressiveDownloadURL": "linkto240p"
                    },
                    {
                        "filesize": "438519051",
                        "label": "360p",
                        "progressiveDownloadURL": "linkto360p"
                    },
                    {
                        "filesize": "594027617",
                        "label": "480p",
                        "progressiveDownloadURL": "linkto480p"
                    },
                    {
                        "filesize": "826531480",
                        "label": "720p",
                        "progressiveDownloadURL": "linkto720p"
                    }
                ],
                "title": "Our First Video"
            }]


			
			
        }
    }
}

<!doctype html>
<html>
<head>

    <title>Our Video Download</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <input type="button" value="Load the Videos" class="button" />
    <br />
    <span id="videos"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

        $(document).ready(function() {

            $('.button').click(function(){

                $.ajax({
                    url: "data.json",
                    dataType: "text",
                    success: function(data) {
					
                        var json = $.parseJSON(data);
						
                    }
                });
            });
        });
    </script>
	
	
</body>
</html>

Answer 1

我会说：

var listOfProgressiveDownloadURLs = [];
$.each(data.category.subcategories.media[0].files, function(index, file){
  var progressiveDownloadURL = file.progressiveDownloadURL;
  listOfProgressiveDownloadURLs.push(progressiveDownloadURL);
});

console.log('listOfProgressiveDownloadURLs:', listOfProgressiveDownloadURLs);

Answer 2

您可以这样做：

＆＃13;

data = {
  "category": {
    "description": "The First Category",
    "subcategories": {
      "media": [
        {
          "durationFormattedMinSec": "1h 5m 37s",
          "files": [
            {
              "filesize": "230772320",
              "label": "240p",
              "progressiveDownloadURL": "linkto240p"
            },
            {
              "filesize": "438519051",
              "label": "360p",
              "progressiveDownloadURL": "linkto360p"
            },
            {
              "filesize": "594027617",
              "label": "480p",
              "progressiveDownloadURL": "linkto480p"
            },
            {
              "filesize": "826531480",
              "label": "720p",
              "progressiveDownloadURL": "linkto720p"
            }
          ],
          "title": "Our First Video"
        }
      ]
    }
  }
};

$(document).ready(function() {
  $('.button').click(function(){
    // Do the AJAX stuff.
    $.each(data["category"]["subcategories"]["media"][0]["files"], function (i, v) {
      append = '<li>';
      append += '<p><strong>Size:</strong> ' + v["filesize"];
      append += '<p><strong>Label:</strong> ' + v["label"];
      append += '<p><strong>Link:</strong> ' + v["progressiveDownloadURL"];
      append += '</li>';
      $("ul").append(append);
    });
  });
});

＆＃13;

* {font-family: segoe ui; margin: 0;}
.button{
  margin:20px;
  font-size:16px;
  font-weight: bold;
  padding:5px 10px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<input type="button" value="Load the Videos" class="button" />
<ul></ul>

＆＃13;

如何使用jQuery循环嵌套的json数据

2 个答案: