CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Olawale Akinseye
Olawale Akinseye

Reputation: 177

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>

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

Upvotes: 1

Views: 11710

Answers (8)

user2377528
user2377528

Reputation:

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

Upvotes: 5

Ilan
Ilan

Reputation: 664

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

Upvotes: 0

Sujith
Sujith

Reputation: 206

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

Upvotes: 0

Adam Dunn
Adam Dunn

Reputation: 132

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.net/4u505hcq/1/

Upvotes: 0

Epirocks
Epirocks

Reputation: 502

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

Upvotes: 0

John Avancena
John Avancena

Reputation: 1

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.

Upvotes: 0

wojtekk
wojtekk

Reputation: 71

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

More here:

Upvotes: 0

Shan Robertson
Shan Robertson

Reputation: 2742

Time to learn about the for loop! https://developer.mozilla.org/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 come 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>');

Upvotes: 1

Related Questions