传入任意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>
如有不足之处,请多多指教。
传入任意json数据源进行格式化处理并用Angularjs显示的更多相关文章
- SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型
SQL 横转竖 .竖专横 (转载) 普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 ...
- PHP json字符串,格式化缩进显示
PHP json字符串,格式化显示 /** * 格式化 */ class JsonFormatHelper { /** * json字符串缩进显示 * @param unknown $json * @ ...
- JSON数据源提供多值参数的实现
一.应用场景 (1)报表的数据内容需要根据某个参数进行过滤. (2)该参数是一个多值参数,即从一个下拉列表中选择一个或多个项目. (3)报表需要自动运行,因此参数必须有默认值. (4)参数默认值无法在 ...
- fastjson解析任意json
fastjson解析任意json到bean 解析案例的代码 package com.base.config; import java.util.List; import com.alibaba.fas ...
- spingmvc 返回json数据日期格式化方法
第一种: json 用的是这个依赖 <!-- JSON lib 开发包 以及它的依赖包 --> <dependency> <groupId>com.fasterxm ...
- 对Json字符串进行格式化显示
很多时候,我们拿Json字符串作为返回结果,但是当数据量多的时候,一堆的Json字符串看起来很不直观,这时候我们可以使用以下办法将Json字符串格式化一下再输出 var JsonUti = { //定 ...
- net.sf.json日期类型格式化输出
net.sf.json 日期类型格式化输出 Date, Timestamp ; 编写工具类 package cn.jorcen.commons.util; import java.text.DateF ...
- spring MVC 如何接收前台传入的JSON对象数组并处理
spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json 即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...
- spring MVC 如何接收前台传入的JSON对象数组
spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json 即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...
随机推荐
- [Computer structure] Written Notes
To some extent, taking notes using my pen and pencil is also an interesting thing! bingo! ~ 2016-03- ...
- VS 代码Diff 之Beyone Compare
前提条件 机器已安装 beyone compared软件和 visual svn for vs 插件. 在VS中集成SVN,我推荐使用 visual svn扩展. visual svn 官网:http ...
- 调用newtonsoft.json反序列出错
调用newtonsoft.json反序列出错: Newtonsoft.Json.JsonSerializationException: Cannot deserialize the current J ...
- QuickFIX/N 动态存储配置信息
Acceptor或者Initiator能够为您维护尽可能多的FIX会话,因而FIX会话标识的唯一性非常重要.在QuickFIX/N中,一个FIX会话的唯一标识是由:BeginString(FIX版本号 ...
- fiddler和xampp安装成功后,网站打不开的原因
fiddler和xampp安装成功后,网站打不开,出现403的错误 解决办法 编辑httpd.conf文件注释掉以下代码 #AllowOverride none # Require all denie ...
- 千位分隔符(js 实现)
最近被同事问到js如何实现给长数字添加千位分隔符,即 1344444 ---> 13,444,444 这是一个很常见的前端面试题.看起来简单,刚开始我都懒得写. 仔细一想,挺考逻辑的,实现方法有 ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- Centos6 修改max user processes limits
ulimit:显示(或设置)用户可以使用的资源的限制(limit),这限制分为软限制(当前限制)和硬限制(上限),其中硬限制是软限制的上限值,应用程序在运行过程中使用的系统资源不超过相应的软限制,任何 ...
- K910 升级Android 4.4.2可用的Google Service Framework
把手机换成了K910, 看上的是骁龙800的cpu和电子罗盘... 比V987是升级一大截了. 花了一个晚上加半个上午的时间终于搞定了GoogleServiceFramework, 试了大概四五个网上 ...
- Mysql LIMIT如何正确对其进行优化
Mysql LIMIT如何正确对其进行优化 2010-05-17 17:09 佚名 博客园 字号:T | T 我们今天主要和大家分享的是Mysql LIMIT简单介绍以及如何进行优化的相关内容的描述, ...