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

时间:2021-03-04 23:29:32

在项目开发中,有些时候我们并不知道传入的数据源(只针对于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&period;Contrib 开发&period;net core程序,兼容多种数据库 C&num; 读取PDF多级书签 Json&period;net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《&period;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&period;sf&period;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. js操作数组

    一.数组的声明方式: var colors = new Array();//创建数组 var colors = new Array(20);//创建20个长度的数组 var colors = new ...

  2. codeblocks&plus;Mingw 下配置开源c&plus;&plus;单元测试工具 google test

    google test 是google的c++开源单元测试工具,chrome的开发团队就是使用它. Code::Blocks 12.11(MinGW 4.7.1) (Windows版)Google T ...

  3. spark读hdfs文件实现wordcount并将结果存回hdfs

    package iie.udps.example.operator.spark; import scala.Tuple2; import org.apache.spark.SparkConf; imp ...

  4. 官网下载旧版本的Xcode

    1.登录“苹果开发者中心”——>“SDKs” 2.点击“Xcode” 3.点击页面顶部的“Download” 4.点击页面左下方的“additional tools”,这样就可以查询到各个Xco ...

  5. python3中用HTMLTestRunner&period;py报ImportError&colon; No module named &&num;39&semi;StringIO&&num;39&semi;解决办法

    .原因是官网的是python2语法写的,看官手动把官网的HTMLTestRunner.py改成python3的语法: 参考:http://bbs.chinaunix.net/thread-415474 ...

  6. virtualbox中 Ubuntu挂载共享文件夹

    1. 进入 /mnt 目录 2. 新建目录 share 3. sudo mount -t vboxsf share /mnt/share(其中的第一个share是共享文件夹的名字) 4. 成功

  7. (七)修改上一条SQL语句,NULL值的滤空函数nvl

    修改上一条SQL语句 1.用c命令来修改(c 即 change ) 默认,光标闪烁位置指向上一条SQL语句的第一行.输入二则定位到第二行. c /错误的关键字/正确的关键字 SQL form emp; ...

  8. 【BZOJ1816】&lbrack;CQOI2010&rsqb;扑克牌(二分,贪心)

    [BZOJ1816][CQOI2010]扑克牌(二分,贪心) 题面 BZOJ 题解 看了一眼这题,怎么这么眼熟?woc,原来\(xzy\)的题目是搬的这道啊... 行,反正我考的时候也切了,这数据范围 ...

  9. Thinkphp自定义标签

    1.定义TagLib目录和文件  TagLibSmarTop.class.php 2.配置文件 <?php return array( 'APP_AUTOLOAD_PATH'=>'@.Ta ...

  10. Linux学习笔记:常用命令grep、iconv、cp、mv、rm

    本篇记录一些近期常用的命令. 一.grep过滤 grep过滤 不包含某些字符串 cat test.txt | grep -v '.jpg' 过滤jpg结尾的图片 cat test.txt | grep ...