khamsat khamsat khamsat

simple JSON

now as long as you dealing with modules you should learn how to deal with JSON Data for real Application that require Data From Server via Ajax or ready JSON within page

loop

if you have to render Huge JSON Data you need to make a loop and that can be done with jsH with external Component out of fn-module Element


<div fn-module="myController" > </div>   

<script type="application/jsH" externalComponent >
 {%
   for(let i=0; i < myController.length; i+){
    {{
      <h2 >Name :   <span v-scope="myController{{+[i]+}}.name></span> </h2>
      <h2 >age  :   <span v-scope="myController{{+[i]+}}.age></span> </h2>
    }}
   }
%}
</script>

<script type="text/javascript">
haxcv.module("myController" , ($xes) => { 

    myController = [
     {name:"Manassa Joseph" , age:23},
     {name:"Afrim Jospeh" , age:19},
     {name:"Shiraz Joseph" , age:14},
     {name:"Jad Joseph" , age:10},
    ];  

 $xes.render({source:'*[externalComponent]'});     
});
</script>   
    

Or


<div fn-module="myController" > </div>   

<script type="application/jsH" externalComponent >
 {%
   for(let i=0; i < myController.length; i+){
    {{
      <h2 >Name :   {{+myController[i].name+}} </h2>
      <h2 >age  :   {{+myController[i].age+}} </h2>
    }}
   }
%}
</script>

<script type="text/javascript">
haxcv.module("myController" , ($xes) => { 

    myController = [
     {name:"Manassa Joseph" , age:23},
     {name:"Afrim Jospeh" , age:19},
     {name:"Shiraz Joseph" , age:14},
     {name:"Jad Joseph" , age:10},
    ];  

 $xes.render({source:'*[externalComponent]'});     
});
</script>   
    

Note :

if you need to make it Dynamic content use first method becuase v-scope attr update data once the $scope change

khamsat khamsat khamsat khamsat