zoukankan      html  css  js  c++  java
  • 传入任意json数据源进行格式化处理并用Angularjs显示

    在项目开发中,有些时候我们并不知道传入的数据源(只针对于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>

    如有不足之处,请多多指教。

  • 相关阅读:
    RABBITMQ/JAVA 客户端测试(再补:利用文件流)
    在虚拟机中安装CentOS7
    RabbitMQ/JAVA 客户端测试(补:利用线程)
    ffmepg-nginx-nginx-rtmp-module配置脚本
    PDO防注入原理分析以及使用PDO的注意事项
    使用MySQL Proxy解决MySQL主从同步延迟
    好文收藏
    CentOS6.6安装mysql出现的问题
    大型网站技术架构相关文章
    Redis必要的一些配置
  • 原文地址:https://www.cnblogs.com/herd/p/5881574.html
Copyright © 2011-2022 走看看