传入任意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>

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

时间: 2024-10-29 02:32:03

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

HTML代码,CSS代码,JSON字符串在线格式化,美化工具

HTML代码,CSS代码,JSON字符串在线格式化,美化工具 http://www.phpthinking.com/format.htm

JSON数据源提供多值参数的实现

一.应用场景 (1)报表的数据内容需要根据某个参数进行过滤. (2)该参数是一个多值参数,即从一个下拉列表中选择一个或多个项目. (3)报表需要自动运行,因此参数必须有默认值. (4)参数默认值无法在设计报表时就确定下来. 二.实现方案 问题的核心是:报表自动运行是无人值守的,没有人机交互的机会,因此"必需性(Required)"报表参数必须有默认值,但是某些报表的参数取值是与业务系统有关的,无法在设计报表模板时就确定好参数的默认值. 解决这一问题的思路是:编写一个Web Servic

利用Gson将JSON数据进行格式化(pretty print)

我们可以利用Gson包将String类型的JSON数据进行格式化. Gson gson = new GsonBuilder().setPrettyPrinting().create(); JsonParser jp = new JsonParser(); JsonElement je = jp.parse(uglyJSONString); String prettyJsonString = gson.toJson(je); 使用 new GsonBuilder.setPrettyPrinting

json返回日期格式化的解决

function jsonDateFormat(jsonDate) {//json日期格式转换为正常格式 try { var date = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMont

ajax异步获得json对象后格式化时间

我现在通过ajax异步获得一个po类(以json对象形式接收),然后希望能够格式化po对象中的一个属性,属性为date类型,然后在页面显示.页面的实现后截图效果如下: 时间属性在后台显示格式形如:Thu Aug 28 13:14:44 CST 2014 在页面js的时间属性形如:[object:object] 实现代码如下: //实现思路:获得毫秒数 再转化为需要时间格式.形如:yyyy-MM-dd var format = function(time, format) { var t = ne

数据行转列的应用(json数据源)

开发项目时有时会遇到将数据的行列进行转换.今天逛园子是看到一个很不错的方法.不需要在数据库中对数据进行行列转换,将数据集合转换长json格式使用如下代码即可. <script> $(document).ready(function () { var jsonData = [ { time: '2014-07-08', name: '电费', value: 120 }, { time: '2014-07-09', name: '电费', value: 66 }, { time: '2014-07

spingmvc 返回json数据日期格式化方法

第一种: json 用的是这个依赖 <!-- JSON lib 开发包 以及它的依赖包 --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.6.0</version> </dependency> 在springmvc返回j

用Java对JSON字符串进行格式化输出

工作中进行http相关接口测试时经常会收到返回的json数据,因为没有格式化输入到控制台后看起来很不直观. 早上写了一个小工具类,对这JSON串进行格式化输出,代替System.out.print package MyTest; /** * 格式化输入工具类 * @author lizhgb * @date 2015-10-14 * */ public final class FormatUtil { /** * 打印输入到控制台 * @param jsonStr * @author lizhg

润乾报表使用json数据源的方法改进

JSON作为一种轻量级数据格式应用非常广泛,报表读取json数据源进行报表开发的需求也很常见.润乾报表使用json数据源需要在自定义数据集中通过Java程序解析json文件后将结果集返回给报表,这里介绍润乾报表的实现方式以及改进方法. 报表需求 学生成绩在应用中以json文件存在,现需要根据学科参数查询指定科目学生成绩,并按学生成绩降序排列.报表样式如下: 润乾报表实现 自定义数据集 润乾报表中需要通过自定义数据集完成json文件的读取,实现过程如下: 1.  准备json解析依赖包 Java程