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

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

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

  1. SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型

    SQL 横转竖 .竖专横 (转载)   普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 ...

  2. PHP json字符串,格式化缩进显示

    PHP json字符串,格式化显示 /** * 格式化 */ class JsonFormatHelper { /** * json字符串缩进显示 * @param unknown $json * @ ...

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

    一.应用场景 (1)报表的数据内容需要根据某个参数进行过滤. (2)该参数是一个多值参数,即从一个下拉列表中选择一个或多个项目. (3)报表需要自动运行,因此参数必须有默认值. (4)参数默认值无法在 ...

  4. fastjson解析任意json

    fastjson解析任意json到bean 解析案例的代码 package com.base.config; import java.util.List; import com.alibaba.fas ...

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

    第一种: json 用的是这个依赖 <!-- JSON lib 开发包 以及它的依赖包 --> <dependency> <groupId>com.fasterxm ...

  6. 对Json字符串进行格式化显示

    很多时候,我们拿Json字符串作为返回结果,但是当数据量多的时候,一堆的Json字符串看起来很不直观,这时候我们可以使用以下办法将Json字符串格式化一下再输出 var JsonUti = { //定 ...

  7. net.sf.json日期类型格式化输出

    net.sf.json 日期类型格式化输出 Date, Timestamp ; 编写工具类 package cn.jorcen.commons.util; import java.text.DateF ...

  8. spring MVC 如何接收前台传入的JSON对象数组并处理

    spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json  即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...

  9. spring MVC 如何接收前台传入的JSON对象数组

    spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json  即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...

随机推荐

  1. nodejs——网络编程模块

    net模块提供了一个异步网络包装器,用于TCP网络编程,它包含了创建服务器和客户端的方法.dgram模块用于UDP网络编程. 参考链接:https://nodejs.org/api/net.html, ...

  2. node.js学习资料

    Node.js 入门 <汇智网 Node.js 课程> <快速搭建 Node.js 开发环境以及加速 npm> http://fengmk2.com/blog/2014/03/ ...

  3. 洛谷P1141 01迷宫

    题目描述 有一个仅由数字0与1组成的n×n格迷宫.若你位于一格0上,那么你可以移动到相邻4格中的某一格1上,同样若你位于一格1上,那么你可以移动到相邻4格中的某一格0上. 你的任务是:对于给定的迷宫, ...

  4. Y2161 Hibernate第三次考试 2016年8月18日 试卷分析

  5. SQL Server 安装 功能详解

    安装 SQL Server 功能     在“功能选择”页上,SQL Server 功能分为以下两个主要部分:实例功能和共享功能. “实例功能”表示为每个实例安装一次的组件,这样,您将具有它们的多个副 ...

  6. BZOJ 1066 【SCOI2007】 蜥蜴

    Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为$1$,蜥蜴的跳跃距离是d,即蜥蜴可以跳 ...

  7. 设置word里的代码格式,使之有底纹的效果

    目录 1    实现效果:    1 2    怎么才能在word里实现这样的显示?    1 如何设置word里的代码格式,使之有底纹的效果    2     实现效果: 怎么才能在word里实现这 ...

  8. jquery常用代码

    转自:未找到 以下是jquery中比较常用的一些操作实现方式: $("标签名") //取html元素 document.getElementsByTagName("&qu ...

  9. C# 如何定义让PropertyGrid控件显示[...]按钮,并且点击后以下拉框形式显示自定义控件编辑属性值

    关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...

  10. scala + intellij idea 环境搭建及编译、打包

    大数据生态圈中风头正旺的Spark项目完全是采用Scala语言开发的,不懂Scala的话,基本上就没法玩下去了.Scala与Java编译后的class均可以运行于JVM之上,就好象.NET中F#与C# ...