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

    To some extent, taking notes using my pen and pencil is also an interesting thing! bingo! ~ 2016-03- ...

  2. VS 代码Diff 之Beyone Compare

    前提条件 机器已安装 beyone compared软件和 visual svn for vs 插件. 在VS中集成SVN,我推荐使用 visual svn扩展. visual svn 官网:http ...

  3. 调用newtonsoft.json反序列出错

    调用newtonsoft.json反序列出错: Newtonsoft.Json.JsonSerializationException: Cannot deserialize the current J ...

  4. QuickFIX/N 动态存储配置信息

    Acceptor或者Initiator能够为您维护尽可能多的FIX会话,因而FIX会话标识的唯一性非常重要.在QuickFIX/N中,一个FIX会话的唯一标识是由:BeginString(FIX版本号 ...

  5. fiddler和xampp安装成功后,网站打不开的原因

    fiddler和xampp安装成功后,网站打不开,出现403的错误 解决办法 编辑httpd.conf文件注释掉以下代码 #AllowOverride none # Require all denie ...

  6. 千位分隔符(js 实现)

    最近被同事问到js如何实现给长数字添加千位分隔符,即 1344444 ---> 13,444,444 这是一个很常见的前端面试题.看起来简单,刚开始我都懒得写. 仔细一想,挺考逻辑的,实现方法有 ...

  7. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  8. Centos6 修改max user processes limits

    ulimit:显示(或设置)用户可以使用的资源的限制(limit),这限制分为软限制(当前限制)和硬限制(上限),其中硬限制是软限制的上限值,应用程序在运行过程中使用的系统资源不超过相应的软限制,任何 ...

  9. K910 升级Android 4.4.2可用的Google Service Framework

    把手机换成了K910, 看上的是骁龙800的cpu和电子罗盘... 比V987是升级一大截了. 花了一个晚上加半个上午的时间终于搞定了GoogleServiceFramework, 试了大概四五个网上 ...

  10. Mysql LIMIT如何正确对其进行优化

    Mysql LIMIT如何正确对其进行优化 2010-05-17 17:09 佚名 博客园 字号:T | T 我们今天主要和大家分享的是Mysql LIMIT简单介绍以及如何进行优化的相关内容的描述, ...