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, "增加失败");
        }
    }

 

新增成功!