精华内容
下载资源
问答
  • 今天尝试前后端分离,用Ajax结合Vue框架获取springMVC生成RestfulAPI的数据,JSON数组是由一个List对象生成的。最后生成的JSON数据的格式大概是这样的,里面主要是天气数据的信息和站点信息: [{“id”:null,...

    今天尝试前后端分离,用Ajax结合Vue框架获取springMVC生成RestfulAPI的数据,JSON数组是由一个List对象生成的。最后生成的JSON数据的格式大概是这样的,里面主要是天气数据的信息和站点信息:

    [{“id”:null,“stationId”:“59488”,“year”:“1962”,“month”:null,“day”:null,“temAVG”:"22.5 ",“temH”:"35.3 ",“temL”:"6.0 ",“pre”:"1350.6 ",“prsAVG”:"1011.4 ",“prsH”:“缺测”,“prsL”:“缺测”,“rhuAVG”:"77.8 ",“rhuL”:“缺测”,“ssd”:"6.2 ",“winAVG”:"3.9 ",“winH”:“缺测”,“winD”:null,“winGustH”:“缺测”,“winGustD”:null,“stationInfo”:{“stationId”:“59488”,“province”:“广东”,“stationName”:“珠海”,“latitude”:null,“longitude”:null,“height”:null}},{“id”:null,“stationId”:“59488”,“year”:“1963”,“month”:null,“day”:null,“temAVG”:"22.8 ",“temH”:"37.1 ",“temL”:"4.7 ",“pre”:"1200.9 ",“prsAVG”:"1012.0 ",“prsH”:“缺测”,“prsL”:“缺测”,“rhuAVG”:"75.1 ",“rhuL”:“缺测”,“ssd”:"7.0 ",“winAVG”:"3.5 ",“winH”:“缺测”,“winD”:null,“winGustH”:“缺测”,“winGustD”:null,“stationInfo”:{“stationId”:“59488”,“province”:“广东”,“stationName”:“珠海”,“latitude”:null,“longitude”:null,“height”:null}}]

    实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="../css/bootstrap.min.css">
      <link rel="stylesheet" href="../css/historyyear.css">
      <script src="../js/vue.js" type="text/javascript"> </script>
    </head>
    <body>
                <div id="weatherLists">
                  <div class="datatitle" align="center">{{weatherLists[0].stationInfo.stationName}}站1962-2018每年数据摘录</div>
                <table class="table table-bordered table-condensed" align="center" >
                                <tr>
                                    <th rowspan="2"></th>
                                    <th colspan="3">气温</th>
                                    <th colspan="3">气压</th>
                                    <th colspan="2">湿度</th>
                                    <th colspan="3">风速</th>
                                    <th rowspan="2">平均日照时数(h)</th>
                                    <th rowspan="2">年雨量(mm)</th>
                                </tr>
                                <tr>
                                    <th>最高气温(℃)</th>
                                    <th>平均气温(℃)</th>
                                    <th>最低气温(℃)</th>
                                    <th>最高气压(hpa)</th>
                                    <th>平均气压(hpa)</th>
                                    <th>最低气压(hpa)</th>
                                    <th>平均湿度(%)</th>
                                    <th>最低湿度(%)</th>
                                    <th>平均风速(m/s)</th>
                                    <th>最大风速(m/s)</th>
                                    <th>极大风速(m/s)</th>
                                </tr>
                                <tr v-for="weather in weatherLists">
                                      <td v-text="weather.year"></td>
                                      <td v-text="weather.temH"></td>
                                      <td v-text="weather.temAVG"></td>
                                      <td v-text="weather.temL"></td>
                                      <td v-text="weather.prsH"></td>
                                      <td v-text="weather.prsAVG"></td>
                                      <td v-text="weather.prsL"></td>
                                      <td v-text="weather.rhuAVG"></td>
                                      <td v-text="weather.rhuL"></td>
                                      <td v-text="weather.winAVG"></td>
                                      <td v-text="weather.winH"></td>
                                      <td v-text="weather.winGustH"></td>
                                      <td v-text="weather.ssd"></td>
                                      <td v-text="weather.pre"></td>
                                  </tr>
                            </table>
                  </div>
      <script src="../js/jquery.js"></script>
      <script src="../js/bootstrap.js"></script>
      <script src="../js/index.js"></script>
    </body>
    </html>
    

    index.js中的内容

    var vm=new Vue(
      {
        el:'#weatherLists',
        data:{
          weatherLists:[],
      },
        created:function(){
          var self=this;
          $.ajax({
            type: 'GET',
            dataType:'json',
            url: 'http://localhost/history/weather',
            success: function(data){
                self.weatherLists=data;
                console.log(data);
          },
          error:function(){
            alert("获取失败");
          }
        })
        }
      })
    
    
    展开全文
  • JSON字符串数组形如 [{"condition":"trigger","data":{"deviceId":7697,"index":"1002","value":"1"}},{"condition":"periodOfTime","data":{"leftInterval":1542859200000,"rightInterval":1543550400000}},{...

    JSON字符串数组形如

    [{"condition":"trigger","data":{"deviceId":7697,"index":"1002","value":"1"}},{"condition":"periodOfTime","data":{"leftInterval":1542859200000,"rightInterval":1543550400000}},{"condition":"devicesStatus","data":[{"deviceId":7697,"index":"1005","value":"1"},{"deviceId":7697,"index":"1006","value":"3"}]}]

    解析完成后是这样的

    现在要求如下,我们需要获取deviceId的值,直接上代码

    public class Test {
        public static void main(String[] args) {
            System.out.println(gettrigger());
            System.out.println(getaction());
        }
        public static Object gettrigger(){
            String s = "[{\"condition\":\"trigger\",\"data\":{\"deviceId\":7697,\"index\":\"1002\",\"value\":\"1\"}},{\"condition\":\"periodOfTime\",\"data\":{\"leftInterval\":1542859200000,\"rightInterval\":1543550400000}},{\"condition\":\"devicesStatus\",\"data\":[{\"deviceId\":7697,\"index\":\"1005\",\"value\":\"1\"},{\"deviceId\":7697,\"index\":\"1006\",\"value\":\"3\"}]}]";
            JSONArray jsonArray = JSONArray.parseArray(s);
            for (Object object : jsonArray) {
                if (object instanceof JSONObject) {
                    JSONObject jsonObject = (JSONObject) object;
                    if (jsonObject.containsKey("condition")) {
                        String condition = jsonObject.getString("condition");
                        if (condition.equals("trigger")) {
                            JSONObject dataJSON = jsonObject.getJSONObject("data");
                            Object deviceDescribe = dataJSON.get("deviceId");
                            if (deviceDescribe == null) {
                                return null;
                            }
                            return deviceDescribe;
                        }
                    }
                }
            }
            return null;
        }
    

    最终结果如图

    展开全文
  • //获取获取请求的返回值 //String response_data = prev.getResponseDataAsString(); String ="{\"errcode\":0,\"errmsg\":\"成功!\",\"data\":[{\"index\":0,\"mock_verify\":false,\"enable_sc...
    //导入json包
    import org.json.*;
    //获取获取请求的返回值
    //String response_data = prev.getResponseDataAsString(); 
    String ="{\"errcode\":0,\"errmsg\":\"成功!\",\"data\":[{\"index\":0,\"mock_verify\":false,\"enable_script\":false,\"_id\":7234,\"uid\":53,\"add_time\":1568804712,\"up_time\":1568804712,\"project_id\":17,\"col_id\":129,\"interface_id\":9956,\"casename\":\"case1\",\"req_params\":[],\"req_headers\":[{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be49974\",\"name\":\"userId\",\"value\":\"\"},{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be49973\",\"name\":\"userToken\",\"value\":\"\"},{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be49972\",\"name\":\"SDKCEId\",\"value\":\"7a9582bd-8660-4f1a-9d0f-8451f688c67b\"},{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be49971\",\"name\":\"userInfo\",\"value\":\"\"}],\"req_query\":[{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be49970\",\"name\":\"sign\",\"desc\":\"\"},{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be4996f\",\"name\":\"timestamp\",\"desc\":\"\"},{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be4996e\",\"name\":\"salt\",\"desc\":\"\"},{\"required\":\"1\",\"_id\":\"5d820f68b8bc8a636be4996d\",\"name\":\"appVersion\",\"desc\":\"\"}],\"req_body_form\":[],\"__v\":0,\"path\":\"/playurl/v1/play/playurl?contId=640121647&rateType=1&chip=9956\",\"method\":\"GET\",\"title\":\"case2\",\"res_body_type\":\"json\"},{\"index\":0,\"mock_verify\":false,\"enable_script\":true,\"_id\":7079,\"uid\":53,\"add_time\":1568798214,\"up_time\":1568798889,\"project_id\":17,\"col_id\":129,\"interface_id\":9770,\"casename\":\"case2\",\"req_params\":[],\"req_headers\":[{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e9\",\"name\":\"userId\",\"value\":\"\"},{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e8\",\"name\":\"userToken\",\"value\":\"\"},{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e7\",\"name\":\"SDKCEId\",\"value\":\"7a9582bd-8660-4f1a-9d0f-8451f688c67b\"},{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e6\",\"name\":\"userInfo\",\"value\":\"\"}],\"req_query\":[{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e5\",\"name\":\"sign\",\"desc\":\"\",\"enable\":true},{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e4\",\"name\":\"timestamp\",\"desc\":\"\",\"enable\":true},{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e3\",\"name\":\"salt\",\"desc\":\"\",\"enable\":true},{\"required\":\"1\",\"_id\":\"5d81f606b8bc8a636be496e2\",\"name\":\"appVersion\",\"desc\":\"\",\"enable\":true}]}]}";
    String title = "case2"; 
    //日志打印获取请求的返回值
    JSONObject data_obj = new JSONObject(response_data);
    
    JSONArray data_str = data_obj.getJSONArray("data");
    log.info(data_str.toString());
    
    int len = data_str.length(); 
    
    String strlen = Integer.toString(len);
    
    vars.put("MessageNum",strlen);
    
    log.info(strlen);
    
    
    for(int i =0;i<len;i++){
        //获取data 数组第i个json
    	JSONObject jsonTemp = (JSONObject)data_str.getJSONObject(i);
    	String title1 = jsonTemp.getString("title");
    //	log.info("------"+title);
    	String _id = jsonTemp.get("_id").toString(); 
    //	log.info("------"+_id);
    	String req_query = jsonTemp.get("req_query").toString();
    //	log.info("------"+req_query);
    	String req_headers = jsonTemp.get("req_headers").toString() ;
    //	log.info("------"+req_headers);
    
    	if(title.equals(title1)){
    		vars.put("_id", _id); 
    		vars.put("req_query", req_query); 
    		vars.put("req_headers", req_headers);
    		log.info("------"+title); 
    		log.info("------"+_id);
    		log.info("------"+req_query);
    		log.info("------"+req_headers);
    	}
    
    }

     

    展开全文
  • var s1 = json[index].toolBy.name; var s2 = json[index].status; var s3 = json[index].outUser.name; var s4 = json[index].outDate; var s5 = json[index].returnDate; var s6 = json[index...
  • 需求:选中checkbox时需要把该元素的name,code,value等值...// 对JSON数组进行判重,key表示以对象中的某个字段来作为判断重复的依据,value表示重复的值 Array.prototype.indexOfJson = function (key, value) {...

    需求:选中checkbox时需要把该元素的name,code,value等值保存以备用,取消选择的checkbox元素需要删除保存的值

    实现:

    html

    js

     

    // 对JSON数组进行判重,key表示以对象中的某个字段来作为判断重复的依据,value表示重复的值
    
    Array.prototype.indexOfJson = function (key, value) {
    
        var k;
    
        for (k in this) {
            if (this[k][key] === value) {
                return k;
            }
        }
    
        return -1;
    }
    
    
    var arrChecked = [];// 保存选中的checkbox值
    
    // 点击checkbox时触发
    $(':checkbox').click(function () {
    
        var $this = $(this),
            index = arrChecked.indexOfJson('code', $this.val());
    
        // 选中则添加,取消则删除
        if (index === -1) {
            arrChecked.push({
                name: $this.attr('name'),
                code: $this.val()
            })
    
        } else {
            arrChecked.splice(index, 1)
        }
    
        console.log(arrChecked)
    })

     

     

    展开全文
  • js 根据json数组多个字段排序的实现代码如下所示: /**数组根据数组对象中的某个属性值进行排序的方法 * 使用例子:newArray.sort(sortByArr(['number'],false)) //表示根据number属性降序排列;若第二个参数不传递...
  • JS遍历JSON对象 var jsonObj = { "id": 102, "year": "2019-2020", "label": "2019-2020" }; **JS遍历方法:** for(var p in jsonObj){ alert(jsonObj[p]); } **Jquery遍历方法** $.each(jsonObj,...
  • 这个是第一个json数组代表全部穴位; ``` var arr = eval(json[index].xuewei); var retStr = ","; $('#xueweiList').append( $(arr).map( function() { ...
  • mysql json数组 索引 index动态

    万次阅读 2018-01-24 16:48:47
    需求:select jsonArray[index],index from table;错误示范select ...select json_extract(jsonArray, "$[index]"),index from table;原理&正确方法可以用字符串拼接函数 CONCAT 生成json_extract 的第二个参数
  • **完整的json数组包含一个小的json数组 点击完整json数组的其他元素时小json数组返回的值也没了** ** 实际上点击任何一个元素 之前的都会消失 而且心 和肝 点击后背景不会退掉** ``` var arr1 = [ { ...
  • JSON数组获取指定key的值

    千次阅读 2019-11-09 13:06:27
    假如有个json,如下,json数组对象是多层嵌套的,每层的键值不确定, 目的是想取出所有的key为testkey的值,即["#testkey1-1", “#testkey1-2”, “#testkey1-3”, “#testkey1-aaa”, “#testkey2-1”, “#testkey2...
  • JSON数组

    千次阅读 2018-08-26 18:10:20
    一、对于JSON的理解: JSON,大部分都是用来处理JavaScript和web服务器端之间的数据交换,把后台web服务器的数据传递到前台,然后使用JavaScript进行处理,例如ajax等。 JSON,就是一种数据传输格式而已,无它,...
  • Java json数组对象获取到前端的值使用js分页 使用ajax时,得到的返回值是一个json数组对象,现在需要对其进行分页显示,下面有两个js方法,一个是使用ajax,另一个就是分类。 在写这一块代码的时候的时候,有一个...
  • 一、获取children数组长度 getMaxFloor (treeData) { //获取树长度 let max = 0 function each (data) { for(let i = 0;i;i++){ max++; ...
  • mysql5.7Json数组解析

    千次阅读 2019-03-08 21:08:10
    mysql5.7支持json极大的方便了我们,但是其中json数组解析一直很麻烦,之前都是先取json数组的长度,然后遍历逐个解析,后来看了一篇博客受到启发,写了这个方法能一次全部解析出来,希望对大家有所启发。...
  • function(currentValue, index, arr) 必需。 数组中每个元素需要调用的函数。 函数参数: 参数 描述 currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr ...
  • JS 集合获取最大、最小值 var array = [ { "index_id": 119, "area_id": "18335623", "name": "满意度", "value": "100" }, { "index_id": 119, "area_id": "18335624", "na
  • javascript操作json数组

    千次阅读 2014-11-27 10:57:36
    json的格式如下: var jarray = [{"day1":26,"day2":26},{"day1":26,"day2":26}] 1、输出json数组中的每个成员 for(var i=0; i; i++) { console.log(jarray[i]); } 2、获取json对象的key和value 3、
  • 微信小程序--Json数组的构造与调用

    千次阅读 2017-12-15 10:28:33
    本文主要引导微信小程序初学者如何对Json数组进行构造与调用。 Json数组的构造与调用 Tips:小程序json的数组的形式与WEB前端是完全相同。 方法一:当前页面构造模型图
  • json数组迭代(get)

    2020-08-20 00:18:47
    在操作json数组时get到一个新的知识点,利用filter()进行判断得到新的json数组然后在用map()进行整合出自己想要的数据结构; 实现效果:(如图) 购物车页面为list,通过里面的selected来判断是否选中,点击购买时...
  • Js中对JSON数组的常用操作

    万次阅读 2018-09-30 11:14:33
    JSON数组操作 我们首先定义一个json数组对象如下: var persons = [ {name: &quot;tina&quot;, age: 14}, {name: &quot;timo&quot;, age: 15}, {name: &quot;lily&quot;, age: 16},...
  • JSON数据解析(JSON对象与json字符串json数组之间转换) JSON的数据解析 $(function(){ var str = { "comments": [ { "content": "很不错嘛", "id": 1, "nickname": "纳尼" }...
  • Java操作Json数组

    千次阅读 2017-09-05 16:16:13
    一、字符串与json 字符串格式: ...static String json = "[{'day1':'work','day2':26},{'day1':123,'day2':26}]";...转换为json数组 [java] view plain copy JSONArray j
  • 先把代码贴上来,有时间整理一下 ...假定现在有一个json格式的字符串,而且他是一个josn中的数组,比如: [ { "id": "NEW2017042605516200", "id_type": 0, "time": "1493270962" ...
  • 4、这是json解析后的数据 ![图片说明](https://img-ask.csdn.net/upload/201607/06/1467796570_99176.png) 5、后台页面穴位 这块显示的都是[object,object] ![图片说明]...
  • 如何将一个jSON对象赋值给一个jSON数组呢?有两种方法。 假设其中jSON对象是var kpis = {"A": [1,2,3,4,5],"B": [ 2,3,4,5,6]}, jSON 数组是var series = [{name:null,data:null}, {name:null,data:null}] >>>...
  • 本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据。分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便。即使是复杂的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 75,079
精华内容 30,031
关键字:

获取json数组index