artTemplate template engine learning (there can be no spaces at both ends of the json key string)

Article reference:

http://www.jq22.com/jquery-info1097/

 

I recently wrote a tree structure at work, and the data is designed by myself:

 

var fomat = {
    "Organization ID_1": {
      "orgId": Organization ID,
      "orgName" organization name,
      "users": {
        "UserID_1":{
          "id": User ID,
          "leaderId": leader ID,
          "leaderName": the name of the reporter,
          "postId ": post ID,
          "postName ": post name
        },
        "UserID_2":{
          "id": User ID,
          "leaderId": leader ID,
          "leaderName": the name of the reporter,
          "postId ": post ID,
          "postName ": post name
        }
      }
    },
    "Organization ID_2": {
      "orgId": Organization ID,
      "orgName" organization name,
      "users": {
        "UserID_1":{
          "id": User ID,
          "leaderId": leader ID,
          "leaderName": the name of the reporter,
          "postId ": post ID,
          "postName ": post name
        },
        "UserID_2":{
          "id": User ID,
          "leaderId": leader ID,
          "leaderName": the name of the reporter,
          "postId ": post ID,
          "postName ": post name
        }
      }
    }
  };

 

I used the artTemplate template engine for data parsing, but there were problems with how to parse it. Finally, I pulled the data to the local area and found that it was normal to use locally.

 

Debugging in the browser, first convert the json object to a string, and then convert it to a JSON object, it also shows normal.

 

Finally, I used debug to debug and found that it was because there was a space at the end of the key of the data. After removing the space of the key, the page displayed normally .

 

To simulate data, the code for data format conversion is as follows:

 

[{
      "avatar": "http://default.jpg",
      "id": 20770003,
      "leaderId": 20760000,
      "leaderName": "aaaaaa",
      "name": "bbbbbbbb",
      "orgId": 681,
      "orgName": "3333333",
      "postId": 700,
      "postName": "Branch Manager"
    }
  ];


// format user information
  function formatUserInfo(){
    var userCount = allUserJons.length;
    var result = {};
    for(var i=0;i < userCount; i++){
      // User information obtained from the database
      var userInfo = allUserJons [i];

      // If you can't find this institution ID, you need to create a new one
      if(result[userInfo.orgId] == undefined){
        // institution object
        var orgObj = {};
        // Institution ID
        orgObj["orgId"] = userInfo.orgId ;
        orgObj["orgName"] = userInfo.orgName ;
        // employees under the agency
        orgObj["users"] = {};
        //The specific employees under the organization
        var tempUser = {};
        // User Info
        tempUser["id"] = userInfo.id ;
        tempUser["leaderId"] = userInfo.leaderId ;
        tempUser["leaderName"] = userInfo.leaderName ;
        tempUser["postId"] = userInfo.postId ;
        tempUser["postName"] = userInfo.postName ;
        // record agency employee
        orgObj["users"][userInfo.id] = tempUser;

        result[userInfo.orgId] = orgObj;
      }
      // if an employee is hired
      else{
        // institution object
        var orgObj = result[userInfo.orgId];
        //The specific employees under the organization
        var tempUser = {};
        // User Info
        tempUser["id"] = userInfo.id ;
        tempUser["leaderId"] = userInfo.leaderId ;
        tempUser["leaderName"] = userInfo.leaderName ;
        tempUser["postId"] = userInfo.postId ;
        tempUser["postName"] = userInfo.postName ;
        // record agency employee
        orgObj["users"][userInfo.id] = tempUser;
      }
    }
    return result;

  }
  var abc = formatUserInfo ();
  console.dir(abc);

 

The code to use the template engine is as follows:

 

<!-- Reporting Relationship Template-->
<script type="text/html" id="reportRelationTemplate">
	{{each orgsData as orgName i}}
	<li class="item" id="{{orgName.orgId}}">
		<div class="menu-header">{{orgName.orgName}}</div><!-- unexpanded -->
		<div class="menu-body">
			<ul class="clearfix">
				{{each orgName.users as users i}}
				<li class="itemInfo" id="{{users.id}}">
					<p class="img"><img src="{{users.avatar}}" width="38" height="38" class="img-circle" /></p>
					<p class="name">{{users.name}}</p>
					<p class="position">{{users.postName}}</p>
					<p class="icon-select"></p>
				</li>
				{{/each}}
			</ul>
		</div>
	</li>
	{{/each}}
</script>


var data = res.data;
var orgsData = formatUserInfo (data.list);
console.log(orgsData);
var data = {
	"orgsData" : orgsData
};

var html = template('reportRelationTemplate',data);