jquery - How to loop through javascript object and display value in html

I am new to javascript and I need help with this. I want to store a number of videos in a js file in the format I have it below.

Here is the videos.js file

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

I am new to javascript and I need help with this. I want to store a number of videos in a js file in the format I have it below.

Here is the videos.js file

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

**And here is the index.html file **

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

I currently update the html manually but it takes too much time and the file gets bigger. I would like to just update new videos on the videos.js file and have the html generated and styled automatically.

If you have a better way I can do this, kindly let me know. Otherwise, kindly help with that. Thanks.

Share Improve this question asked May 29, 2015 at 21:23 Olawale Akinseye 1771 gold badge1 silver badge13 bronze badges

for (foo in bar) ...? – Marc B Commented May 29, 2015 at 21:25
Can you be detailed in your answer? – Olawale Akinseye Commented May 29, 2015 at 21:27
Is your pasted code correct? Your JavaScript object videos looks inplete. – insertusernamehere Commented May 29, 2015 at 21:32
Your javascript code is not really an object, so there is no easy way to show data, unless you correct your data and store it as object – yuk Commented May 29, 2015 at 21:36
Is that exactly what you have? More than likely you will have js error when video.js is loaded due to a couple of ; that are in places they should not be – scrappedcola Commented May 29, 2015 at 21:40

Add a ment |

8 Answers 8

Sorted by: Reset to default 5

Look at the link below. I have generated your whole code using multiple loops. There is a library included: jQuery. It's used to make the code shorter.

Demo

This is how you create arrays and objects:

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'
    }
  }
}

And then iterate over it:

$.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>'; 
        });
    });
});

Time to learn about the for loop! https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/for

There are a number of ways you can do this with your specific content, and i'm not going to solve this for you, but lets take your sample data for a second:

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

key can be named anything but it is the key to each video '240, 360 etc'

Now, the example above will only loop over that one node. Since you have multiple nested nodes you will have to e up with a system to loop through them all, how you do this is up to you.

In your for loop, you can also create new anchor tags by doing something like this.

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

Pass value to variable and use for in loop and document.write or DOM manipulation.

More here:

http://www.w3schools./js/js_loop_for.asp
http://www.w3schools./js/js_output.asp
http://www.w3schools./js/js_htmldom_nodes.asp

I would suggest structuring your code differently. for example your objects can be an array of objects.

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

You can then itterate through this object using jquery...or simple javascript. using 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);
});

Essentially, develop an array of objects. they can be accessed in a foreach loop like "object name" dot "object property". then just append it to the html document.

Me, I would prefer a javascript object hierarchy, like: { name:"root", children:[ { name:"Family", children:[ { name:"Children", children:[] }, { name:"Parent", children:[] } ] }, { name:"Monthly", children:[ { name:"January", children:[] }, { name:"February", children:[] } ] } ] },

Then a more future proof loop, either recursive or not could go through without worrying about the names of your categories or having recode it.

Also, using something like Ember.js to assign an object to a html template would make it convenient to spit out the html, but not essential.

If your data js gets too big I'd resort to talking to a server and paginating through the records, rather than hardcoding the js.

Just

The way I would handle would be to use the jQuery.each method to interate over the object.

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);    
});

Here's the jsFiddle: http://jsfiddle/4u505hcq/1/

Important thing is creating the object and understanding your structure properly. Rest is simple for loops

  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);
                }
            }
        }

// 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);
                    }
                }
            }
        }
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How to loop through javascript object and display value in html - Stack Overflow

8 Answers 8

与本文相关的文章

评论列表(0)