您的位置:首页 > Web前端 > AngularJS

传入任意json数据源进行格式化处理并用Angularjs显示

2016-09-18 14:47 357 查看
在项目开发中,有些时候我们并不知道传入的数据源(只针对于json格式的)的内部结构,本文用最笨的办法先把数据源格式化一遍,把所有的key值替换成自定义的值,然后在页面上用angularjs展示。

html代码:

<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代码:

<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":"邯郸汉迪","hj_index_3":"111111"},{"hj_index_1":"1008","hj_index_2":"邯郸乐尚","hj_index_3":"111111"}];

//测试数据源
$scope.ghghgh=ghghgh_result;
}]);

//如果页面上已经使用过ng-app了,这里就得添加这段代码,启动该ng-app
angular.element(document).ready(function (){angular.bootstrap(document.getElementById('jkjk'), ['hjhhhap']);});

//数据处理阶段

function hjFormatDataSource(this_dataSource){
  var hj_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]){

      //把数据源的key变成自定义的属性,方便页面上显示
      myjsonStr = setJson(myjsonStr,"hj_index_"+j,this_dataSource[i][key]);
      j++;
    }
    hj_data_source.push(myjsonStr);
  }
  var arr = eval('([' + hj_data_source + '])');
  return arr;
}

//添加或者修改json数据
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>

如有不足之处,请多多指教。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: