knockout-3.1.0.js:51 Uncaught Error: Cannot find closing comment tag to match: ko foreach: countCapitals

Posted by on
As i was creating a konckout js program to display list of country with capitals on the browser using the foreach loop, i have written a small peace of code as below

 <body>
       <table>
           
    <thead>
        <tr><th>Country </th><th>Capiatl</th></tr>
    </thead>
    <!-- ko foreach: countryCapitals-->
         <tr>
            <td data-bind="text: countryName"></td>
            <td data-bind="text: capital"></td>
        </tr>
    <!--/ko-->
</table>
     

      <script type = "text/javascript">
        
       
         ko.applyBindings(
            countryCapitals = ko.observableArray ([
               {countryName: 'ALBANIA', capital: 'TIRANA'},
               {countryName: 'ALGERIA', capital: 'ALGIERS'},
               {countryName: 'ANDORRA', capital: 'ANDORRA LA VELLA'},
               {countryName: 'ANGOLA', capital: 'LUANDA'}  ])


        
         );
      </script>
      
   </body>


when  i try to run the above program in the browser by saving i get the following error


    knockout-3.1.0.js:51 Uncaught Error: Cannot find closing comment tag to match:  ko foreach: countCapitals
    at d (knockout-3.1.0.js:51)
    at e (knockout-3.1.0.js:51)
    at Object.nextSibling (knockout-3.1.0.js:53)
    at f (knockout-3.1.0.js:57)
    at h (knockout-3.1.0.js:57)
    at f (knockout-3.1.0.js:57)
    at h (knockout-3.1.0.js:57)
    at Object.a.fb (knockout-3.1.0.js:63)
    at 1.html:26
d @ knockout-3.1.0.js:51
e @ knockout-3.1.0.js:51
nextSibling @ knockout-3.1.0.js:53
f @ knockout-3.1.0.js:57
h @ knockout-3.1.0.js:57
f @ knockout-3.1.0.js:57
h @ knockout-3.1.0.js:57
a.fb @ knockout-3.1.0.js:63
(anonymous) @ 1.html:26

to solve the above error , i have modified the code as below

   <body>
       <table>
           
    <thead>
        <tr><th>Country </th><th>Capiatl</th></tr>
    </thead>
    <tbody>
    <!-- ko foreach: countryCapitals-->
         <tr>
            <td data-bind="text: countryName"></td>
            <td data-bind="text: capital"></td>
        </tr>
    <!--/ko-->
    </tbody>
</table>
     

      <script type = "text/javascript">
        
       
         ko.applyBindings(
            countryCapitals = ko.observableArray ([
               {countryName: 'ALBANIA', capital: 'TIRANA'},
               {countryName: 'ALGERIA', capital: 'ALGIERS'},
               {countryName: 'ANDORRA', capital: 'ANDORRA LA VELLA'},
               {countryName: 'ANGOLA', capital: 'LUANDA'}  ])


        
         );
      </script>
      
   </body>

extra code added is a opening of a tbody tag a closing tag of tbody which was missing in the above example written at the beginig

Comments

Post a Comment