Question

我是javascript的新手，我需要帮助。我想在js文件中存储一些视频，格式如下所示。

这是videos.js文件

＆＃13;

<script>       
       videos  {
           monthly {
                       january
                         {
                           240 : 'linktojanuary240.mp4',
                           360 : 'linktojanuary360.mp4',
                           480 : 'linktojanuary480.mp4',
                           720 : 'linktojanuary720.mp4'
                         },
                        
                       february
                         {
                           240 : 'linktofebruary240.mp4',
                           360 : 'linktofebruary360.mp4',
                           480 : 'linktofebruary480.mp4',
                           720 : 'linktofebruary720.mp4'
                         }
                 };    
                        
                    
         family {
                      children
                         {
                          240 : 'linktochildren240.mp4',
                          360 : 'linktochildren360.mp4',
                          480 : 'linktochildren480.mp4',
                          720 : 'linktochildren720.mp4'
                         },
                     parent 
                         {
                          240 : 'linktoparent240.mp4',
                          360 : 'linktoparent360.mp4',
                          480 : 'linktoparent480.mp4',
                          720 : 'linktoparent720.mp4'
                    
                         }
               };
                  
                  
       };
      
     </script>

＆＃13;

**这是index.html文件**

＆＃13;

<html>

<head>
</head>

<body>
  <h3>  Monthly </h3>
  <h1>january</h1>
  <a href="linktojanuary240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a> 
  <a href='linktojanuary360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a> 
  <a href='linktojanuary480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a> 
  <a href='linktojanuary720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a> 

  <h1>february</h1>
  <a href="linktofebruary240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a> 
  <a href='linktofebruary360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a> 
  <a href='linktofebruary480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a> 
  <a href='linktofebruary720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a> 



  <h3>  family </h3>
  <h1>children</h1>
  <a href="linktochildren240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a> 
  <a href='linktochildren360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a> 
  <a href='linktochildren480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a> 
  <a href='linktochildren720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a> 

  <h1>parent</h1>
  <a href="linktoparent240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a> 
  <a href='linktoparent360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a> 
  <a href='linktoparent480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a> 
  <a href='linktoparent720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a> 

</body>

＆＃13;

我目前手动更新html，但需要花费太多时间，文件会变大。我想在 videos.js 文件中更新新视频，并自动生成和设置html。

如果你有更好的方法可以做到这一点，请告诉我。否则，请帮助。感谢。

Answer 1

请看下面的链接。我使用多个循环生成了整个代码。有一个图书馆：jQuery。它用于缩短代码。

Demo

这是创建数组和对象的方法：

var videos = {
  monthly: {
    january: {
      240: 'linktojanuary240.mp4',
      360: 'linktojanuary360.mp4',
      480: 'linktojanuary480.mp4',
      720: 'linktojanuary720.mp4'
    },
    february: {
      240: 'linktofebruary240.mp4',
      360: 'linktofebruary360.mp4',
      480: 'linktofebruary480.mp4',
      720: 'linktofebruary720.mp4'
    }
  },
  family: {
    children: {
      240: 'linktochildren240.mp4',
      360: 'linktochildren360.mp4',
      480: 'linktochildren480.mp4',
      720: 'linktochildren720.mp4'
    },
    parent: {
      240: 'linktoparent240.mp4',
      360: 'linktoparent360.mp4',
      480: 'linktoparent480.mp4',
      720: 'linktoparent720.mp4'
    }
  }
}

然后迭代它：

$.each(videos, function(key, value) {
   html += "<h3>"+key+"</h3>";
    $.each(value, function(month, file) {
     html += "<h1>"+month+"</h1>";
        $.each(file, function(size, name) {
            html += '<a href="'+name+'" data-role="button" data-inline="true" data-mini="true">'+size+' </a>'; 
        });
    });
});

Answer 2

了解for循环的时间！ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

您可以通过多种方式对自己的特定内容进行此操作，而且我不会为您解决此问题，但我们可以将您的示例数据暂停一下：

for(var key in videos.monthly.january){
   // videos.monthly.january[key] will print out all your videos from january
}

key可以被命名为任何内容，但它是每个视频的关键＆＃; 240,360等＆＃39;

现在，上面的示例将仅循环遍历该节点。由于你有多个嵌套节点，你将不得不想出一个系统来循环遍历它们，你如何做到这一点取决于你。

在for循环中，您还可以通过执行此类操作来创建新的锚标记。

document.body.appendChild('<a href="'+videos.monthly.january[key]+'" data-role="button" data-inline="true" data-mini="true">'+key+'p </a>');

Answer 3

将值传递给变量并使用for in循环和document.write或DOM操作。

更多信息：

Answer 4

我建议以不同的方式构建代码。例如，您的对象可以是一个对象数组。

var videos=[{
month:"jan",
240:"link",
360:"link"
},{
month:"feb",
240:"link2",
360:"link2"
}];

然后你可以使用jquery ...或简单的javascript来浏览这个对象。使用norm js：

videos.forEach(function(video){
var div=document.createElement('div');
div.textContent=video.month;
document.body.appendChild(div)
});

jquery的：

videos.forEach(function(){
var div=$("<div>"+video.month+"<div>");
$(document.body).append(div);
});

基本上，开发一个对象数组。它们可以在foreach循环中访问，例如＆＃34;对象名称＆＃34;点＆＃34;对象属性＆＃34;。然后将其附加到html文档。

Answer 5

我，我更喜欢javascript对象层次结构，例如： {name：“root”，children：[ {姓名：“家庭”，儿童：[ {姓名：“儿童”，儿童：[]}， {name：“Parent”，children：[]} ]}， {姓名：“每月”，儿童：[ {name：“January”，children：[]}， {name：“February”，孩子们：[]} ]} ]}，

然后，一个更加未来的循环，无论是递归还是不循环都可以通过，而不必担心类别的名称或重新编码。

此外，使用类似Ember.js的东西将对象分配给html模板会使吐出html变得方便，但不是必需的。

如果您的数据js太大，我会求助于与服务器通信并对记录进行分页，而不是硬编码j。

只需

Answer 6

我要处理的方法是使用jQuery.each方法来交互对象。

HTML：

<body>
    <div id="videos">
        <!-- VIDEOS GET INSERTED HERE -->
    </div>
</body>

JAVASCRIPT：

var videos = {
    monthly: {
        january: {
            240: 'linktojanuary240.mp4',
            360: 'linktojanuary360.mp4',
            480: 'linktojanuary480.mp4',
            720: 'linktojanuary720.mp4'
        },
        february: 
        {
            240: 'linktofebruary240.mp4',
            360: 'linktofebruary360.mp4',
            480: 'linktofebruary480.mp4',
            720: 'linktofebruary720.mp4'
        }
    },    
    family: {
        children: {
            240: 'linktochildren240.mp4',
            360: 'linktochildren360.mp4',
            480: 'linktochildren480.mp4',
            720: 'linktochildren720.mp4'
        },
        parent: {
            240: 'linktoparent240.mp4',
            360: 'linktoparent360.mp4',
            480: 'linktoparent480.mp4',
            720: 'linktoparent720.mp4'
        }
    }
};

$(document).ready(function(){
    var html = "";
    // go through each item under videos...
    $.each(videos, function(itemName, item){
        html += ("<h3>" + itemName + "</h3>");
        // go through each item under item...
        $.each(item, function(subItemName, subItem){
            html += ("<h1>" + subItemName + "</h1>");
            // go through each item under subItem...
            $.each(subItem, function(linkNumber, linkValue){
                // create hyperlink...
                html += ("<a href=\"linkto" + subItemName + linkNumber + "p.mp4\" data-role=\"button\" data-inline=\"true\" data-mini=\"true\">" + linkNumber + "p</a>"); 
            });
        });
    });
    // insert final html into #videos...
    $("#videos").html(html);    
});

这是jsFiddle：http://jsfiddle.net/4u505hcq/1/

Answer 7

重要的是创建对象并正确理解您的结构。休息对于循环来说很简单

  for(var category in videos){
            var h3 = document.createElement('h3');
            var categoryContent = document.createTextNode(category);
            h3.appendChild(categoryContent);
            document.body.appendChild(h3);
            for(var subcategory in videos[category]){
                var h1 = document.createElement('h1');
                var subcategoryContent = document.createTextNode(subcategory);
                h1.appendChild(subcategoryContent);
                document.body.appendChild(h1);
                for(videolink in videos[category][subcategory]){
                    var a = document.createElement('a');
                    var aContent = document.createTextNode(videolink); 
                    a.appendChild(aContent);
                    a.setAttribute('href',videos[category][subcategory][videolink]);
                    a.setAttribute('data-role','button');
                    a.setAttribute('data-inline','true');
                    a.setAttribute('data-mini','true');
                    document.body.appendChild(a);
                }
            }
        }

Answer 8

// 1. Use h2, under h1, h3 under h2 etc.
// 2. As said before, it's time to learn JS and HTML.
// 3. Your JSON object has some syntax errors (see the corrections below).
// 4.Enjoy


// JavaScript source code
var videos = {
    monthly: {
        january:
            {
                240: 'linktojanuary240.mp4',
                360: 'linktojanuary360.mp4',
                480: 'linktojanuary480.mp4',
                720: 'linktojanuary720.mp4'
            },

        february:
          {
            240: 'linktofebruary240.mp4',
            360: 'linktofebruary360.mp4',
            480: 'linktofebruary480.mp4',
            720: 'linktofebruary720.mp4'
          }
    },

    family: {
        children:
           {
            240: 'linktochildren240.mp4',
            360: 'linktochildren360.mp4',
            480: 'linktochildren480.mp4',
            720: 'linktochildren720.mp4'
           },
        parent:
            {
                240: 'linktoparent240.mp4',
                360: 'linktoparent360.mp4',
                480: 'linktoparent480.mp4',
                720: 'linktoparent720.mp4'

            }
    }

};

var body = $("body");
for (var p in videos) {
    if (videos.hasOwnProperty(p)) {
        var h1 = $("<h1>" + p + "</h1>");
        body.append(h1);
        for (var m in videos[p]) {
            if (videos[p].hasOwnProperty(m)) {
                var h2 = $("<h2>" + m + "</h2>");
                body.append(h2);
                for (var v in videos[p][m]) {
                    if (videos[p][m].hasOwnProperty(v)) {
                        var a = $("<a href='" + videos[p][m][v] + "' data-role='button' data-inline='true' data-mini='true'>" + v + "p </a><br/> ");
                        body.append(v);
                    }
                }
            }
        }
    }
}

如何循环遍历javascript对象并在html中显示值

8 个答案: