angularJS js json 字符串 對象

前端封裝一個entity js對象 

1.初始化entity的customAttributeItems

 

  <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={customAttributeItems:[]}"><i class="fa fa-file-o"></i> 新建</button>

 2.點新建按鈕   讓 entity:{{entity}} 顯示出來

3.已綁定的屬性

 

                        <tr ng-repeat="pojo in entity.customAttributeItems">
                                    <td><input type="checkbox" class="icheckbox_square-blue" ></td>
                                    <td><input class="form-control" placeholder="屬性名稱" ng-model="pojo.text"></td>
                                    <td><button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)"><i class="fa fa-trash-o"></i> 刪除</button></td>
                        </tr>

 

 

4.添加擴展屬性

 

 4.綁定屬性 其中config為數據來源  multiple為支持多選

 

　　　　　　　　　　<tr>
                      <td>商品類型</td>
                      <td><input  class="form-control" placeholder="商品類型" ng-model="entity.name">  </td>
                  </tr>               
                  <tr>
                      <td>關聯品牌</td>
                      <td>
                          <input select2 config="brandList" select2-model="entity.brandIds" multiple class="form-control">
                      </td>
                  </tr>
                  <tr>
                      <td>關聯規格</td>
                      <td>
                        <input select2 config="specList" select2-model="entity.specIds" multiple class="form-control">
                      </td>
                  </tr>    　　　　　　

 顯示效果

 

 

這里我們發現entity是json格式的js對象，這個對象直接向后端提交不成功，

原因：數據庫里面的存儲格式如下

 

 

不難發現，spec_ids,brand_ids 和custom_attribute_items里面存的時一個json格式的字符串,所以后面要將json對象里面的 []變成 ‘[]’

 

{
"customAttributeItems":[{"text":"屏幕材質"},{"text":"顏色"}],
"name":"電視機",
"brandIds":[{"id":2,"text":"華為"},{"id":4,"text":"小米"},{"id":7,"text":"中興"}],
"specIds":[{"id":33,"text":"電視屏幕尺寸"},{"id":32,"text":"機身內存"}]
}

 

但是當點save保存時，會出現一個問題，首先將entity對象轉為字符串alert()一下

 

var json =JSON.stringify(entity);
alert(json);

alert后發現customAttributeItems 多了

"$$hashKey":"00S",

"$$hashKey":"00U",
這兩個東西，導致向后端提交不成功 報400錯誤。

{"customAttributeItems":[
{"$$hashKey":"00S","text":"屏幕材質"},{"$$hashKey":"00U","text":"顏色"}],
"name":"電視機",
"brandIds":[{"id":2,"text":"華為"},{"id":4,"text":"小米"},{"id":7,"text":"中興"}],
"specIds":[{"id":33,"text":"電視屏幕尺寸"},{"id":32,"text":"機身內存"}]
}

 

問題描述與解決

 因為在 下面使用了$index,

<tr ng-repeat="pojo in entity.customAttributeItems track by $index">
　　<td><input type="checkbox" class="icheckbox_square-blue" ></td>
　　<td><input class="form-control" placeholder="屬性名稱" ng-model="pojo.text"></td>
　　<td><button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)"><i class="fa fa-trash-o"></i> 刪除</button></td>
</tr>　　

 

所以會出現上面的情況。

解決：在ng-repeat里加入track by $index

<tr ng-repeat="pojo in entity.customAttributeItems track by $index">

 

然后要將 [] 替換成 '[]'

下面的eval()函數是將字符串轉為js對象，但是由於[] 變成了 ’[]‘ ,所以此時的obj不是json對象。

$scope.FormatJson=function(entity){
             var json =JSON.stringify(entity)
             alert(json);
           //[]替換成'[]'  jquery的函數
             json = json.replace(/[\\[]/g,'\'\[');
           json = json.replace(/\]/g,'\]\'');
           alert(json);
           var obj=eval("("+json+")")
           //var entity = JSON.parse(json);
           return obj;    
        }

 

上面的son替換后為，此時不是json格式了

 

{
"customAttributeItems":'[{"text":"屏幕材質"},{"text":"顏色"}]',
"name":"電視機",
"brandIds":'[{"id":2,"text":"華為"},{"id":4,"text":"小米"},{"id":7,"text":"中興"}]',
"specIds":'[{"id":33,"text":"電視屏幕尺寸"},{"id":32,"text":"機身內存"}]'
}

返回一個js對象

 var obj=eval("("+json+")")

 

保存

//保存 
    $scope.save=function(){    
        $scope.entity = $scope.FormatJson($scope.entity);
        ; 
        //$scope.entity.substring(1,$scope.entity.length-1); 
        alert("entity:"+$scope.entity);
        //$scope.entity=null;
        //$scope.entity={"customAttributeItems":'[{"text":"顏色"}]',"name":"測試","brandIds":'[{"id":2,"text":"華為"}]',"specIds":'[{"id":33,"text":"電視屏幕尺寸"}]'};
    
    
        var serviceObject;//服務層對象      
        if($scope.entity.id!=null){//如果有ID
            serviceObject=typeTemplateService.update( $scope.entity ); //修改  
        }else{
            serviceObject=typeTemplateService.add( $scope.entity  );//增加 
        }                
        serviceObject.success(
            function(response){
                if(response.success){
                    alert(response.message);
                    //重新查詢 
                    $scope.reloadList();//重新加載
                
                }else{
                    alert(response.message);
                }
            }        
        );                
    }
    

 

后端接收

/**
     * 增加
     * @param typeTemplate
     * @return
     */
    @RequestMapping("/add")
    public Result add(@RequestBody TbTypeTemplate typeTemplate){
        try {
            System.out.println(typeTemplate+"=================");
            typeTemplateService.add(typeTemplate);
            return new Result(true, "增加成功");
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "增加失敗");
        }
    }

 

新增成功!