0

i'm very keen in knowing how do angular,vue implement for loop inside template.

let say i have data like below, i need to iterate them and append to dom.

var list = ['Apple','Banana','Orange'];
var unorderedListTemplate = `<ul>`;
var listTemplate = '';
for(var i = 0; i < list.length; i++){
    listTemplate += `<li>${list[i]}</li>`;
 }
unorderedListTemplate += listTemplate;
unorderedListTemplate += '</ul>'
console.log('completed list',unorderedListTemplate);

In vuejs it is implemented like below code

 <ul>
  <li v-for="item in list">
    {{ item }}
  </li>
 </ul>

How do they achieve the above code, i'm very interested in knowing.

Very interestingly they are able to keep track of key and value of object

let say we have data

   var objectData = {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
   }

 <div v-for="(value, name) in objectData">
  {{ name }}: {{ value }}
</div>

Question: How can i implement template side for loop similar to vue,angular in javascript

Learner
  • 61
  • 2
  • 21
  • You can find the answer here: https://stackoverflow.com/questions/584751/inserting-html-into-a-div – Mr Runi Jun 14 '20 at 04:20
  • There is something called template compiler. It is a function that analyse the `template` and calls `render` function with all it's attributes. Here, watch this ⏩ https://www.youtube.com/watch?v=a0pMbM2Q5kI – Adam Orłowski Jun 14 '20 at 06:45

0 Answers0