Pass in any JSON data source for formatting and display with Angularjs

Source: Internet
Author: User

In the project development, sometimes we do not know the incoming data source (only for the JSON format) of the internal structure, this article in the most stupid way to first format the data source, all the key values are replaced with custom values, and then on the page with Angularjs display.

HTML code:

<div class= "col-xs-12 col-sm-12 col-md-4 col-lg-3 col-hj-div" ng-app= ' Hjhhhap ' ng-controller= ' Fgfg_con ' id= "JKJK" >
<table class= "Table hj-select-pannel-table table-striped table-hover" >
<tbody>
<tr ng-repeat= "Hj_test3_data in Ghghgh Track by $index" >
<td><input type= "checkbox" ></td>
<td>{{hj_test3_data.hj_index_1}}</td>
<td>{{hj_test3_data.hj_index_2}}</td>
</tr>
</tbody>
</table>
</div>

JS Code:

<script>

  

var demoApp = angular.module ("Hjhhhap", []);
Demoapp.controller ("Fgfg_con", [' $scope ', function ($scope) {
Console.log (Json.stringify (Ghghgh_result));
var ghghgh_result=hjformatdatasource (THIS_COMPANY1);
var ghghgh_result1=[{"hj_index_1": "1007", "hj_index_2": "Handan Handy", "Hj_index_3": "111111"},{"hj_index_1": "1008", "hj_ Index_2 ":" Handan le Shang "," Hj_index_3 ":" 111111 "}];

Test data source
$scope. Ghghgh=ghghgh_result;
}]);

If Ng-app has been used on the page, you need to add this code to start the Ng-app
Angular.element (document). Ready (function () {Angular.bootstrap (document.getElementById (' jkjk '), [' Hjhhhap ']);});

Data processing phase

function Hjformatdatasource (this_datasource) {
var hj_data_source=[];

Traverse the data source
for (var i=0; i<this_datasource.length; i++) {
var myjsonstr = "";
var this_list={};
var j=1;
for (var key in This_datasource[i]) {

Change the key of the data source into a custom property for easy display on the page
Myjsonstr = Setjson (Myjsonstr, "Hj_index_" +j,this_datasource[i][key]);
j + +;
}
Hj_data_source.push (MYJSONSTR);
}
var arr = eval (' ([' + Hj_data_source + ') ');
return arr;
}

Add or modify JSON data
function Setjson (jsonstr,name,value)
{
if (!JSONSTR) jsonstr= "{}";
var jsonobj = Json.parse (JSONSTR);
Jsonobj[name] = value;
Return json.stringify (jsonobj);
}

function Strtojson (str) {
var json = eval (' (' + str + ') ');
return JSON;
}

</script>

If there are deficiencies, please advise.

Pass in any JSON data source for formatting and display with Angularjs

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.