Angular JS Help

Hi,

I have a json data that i want to display in html page.

var location_tech_ranking = [
        ["table_opening":"
            <table>
            <thead>
              <tr>
                <th></th>
                <th>Account ID</th>
                <th>Name</th>
                <th>Company Name</th>
                <th>Position</th>
              </tr>
            </thead>"],
       
        ["content", [
            { "account_id":"1", "name":"John Doe", "comp_name":"Company 1","position":"Technician" },
                { "account_id":"2", "name":"Alex Fleri", "comp_name":"Company 2","position":"Technician" },
                { "account_id":"3", "name":"Anthony Neri", "comp_name":"Company 3","position":"Technician" },
                { "account_id":"4", "name":"Jason Campbel", "comp_name":"None","position":"Individual Technician" }, ],
       
        ["table_closing":"
            <tfoot>
              <tr>
                <td colspan=\"5\">
                  <div class=\"pagination pagination-centered\">
                    <span style=\"display:block;\"><strong>Total Technician: 4</strong></span>
                    <ul>
                        <li><a href=\"#\">«</a></li>
                        <li><a href=\"#\">1</a></li>
                        <li><a href=\"#\">2</a></li>
                        <li><a href=\"#\">»</a></li>
                    </ul>

                  </div>
                </td>
              </tr>
            </tfoot>
          </table>"]
      ];

Code (markup):

What i want to this json data is to parse using angular js. Basically I want to render the html table with dynamic content inside a modal or a page. Is my json format correct? Anyone have an idea with this.

Thanks

 

Javascript doesn't support carriage returns in strings unless you escape them with \n, javascript arrays do NOT support indexed names so almost all your [] need to be {}... and your markup is no winner either since TFOOT actually has to go BEFORE TBODY, not after (counterintuitive I realize), and really if it's going to colspan the full width why is it even in a table element in the first place?

Of course it also feels like you're using outdated/broken methodology since it would appear you are building your elements with innerHTML instead of the DOM?

 

Here, I just rewrote that as valid JSON... and it shows why even trying to pass markup in JSON is a train wreck usually not worth doing. Pass data, not markup. You want that, build it on the DOM.

var location_tech_ranking = {
	table_opening : '<table><thead><tr><th></th><th>Account ID</th><th>Name</th><th>Company Name</th><th>Position</th></tr></thead>',
	content : [
			{ account_id : '1', name : 'John Doe', comp_name : 'Company 1', position : 'Technician' },
			{ account_id : '2', name : 'Alex Fleri', comp_name : 'Company 2', position : 'Technician' },
			{ account_id : '3', name : 'Anthony Neri', comp_name : 'Company 3', position : 'Technician' },
			{ account_id : '4', name : 'Jason Campbel', comp_name : 'None', position : 'Individual Technician' }
	],
	table_closing : '<tfoot><tr><td colspan="5"><div class="pagination pagination-centered"><span style="display:block;"><strong>Total Technician: 4</strong></span><ul><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">»</a></li></ul></div></td></tr></tfoot></table>'
};

Code (markup):

again, [] is arrays, which cannot have named indexes in javascript. Only objects using {} can have names. I also pulled a bunch of unnecessary quotes, and swapped to single quotes for the string declarations so you don't have to escape the doubles.

 

Thank you, i'll take note of that.

 

Just looking to share something on AngularJS. http://javascript.pixelcrayons.com/kb/understanding-the-concept-of-angularjs/

Hope this will be helpful for new learners.