json Angularjs 在 ng-repeat 中将字符串转换为对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32831654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs convert string to object inside ng-repeat
提问by Sobakinet
i've got a string saved in my db
我的数据库中保存了一个字符串
{"first_name":"Alex","last_name":"Hoffman"}
I'm loading it as part of object into scope and then go through it with ng-repeat. The other values in scope are just strings
我将它作为对象的一部分加载到作用域中，然后使用 ng-repeat 遍历它。范围内的其他值只是字符串
{"id":"38","fullname":"{\"first_name\":\"Alex\",\"last_name\":\"Hoffman\"}","email":"alex@mail","photo":"img.png"}
But I want to use ng-repeat inside ng-repeat to get first and last name separate
但我想在 ng-repeat 中使用 ng-repeat 来区分名字和姓氏
<div ng-repeat="customer in customers">
<div class="user-info" ng-repeat="name in customer.fullname">
{{ name.first_name }} {{ name.last_name }}
</div>
</div>
And I get nothing. I think, the problem ist, that full name value is a string. Is it possible to convert it to object?
而我什么也得不到。我认为，问题在于，全名值是一个字符串。是否可以将其转换为对象？
回答by Robo Rick
First off... I have no idea why that portion would be stored as a string... but I'm here to save you.
首先......我不知道为什么那部分会被存储为一个字符串......但我是来拯救你的。
When you first get the data (I'm assuming via $http.get request)... before you store it to $scope.customers... let's do this:
当您第一次获取数据时（我假设通过 $http.get 请求）...在将其存储到 $scope.customers 之前...让我们这样做：
$http.get("Whereever/You/Get/Data.php").success(function(response){
//This is where you will run your for loop
for (var i = 0, len = response.length; i < len; i++){
response[i].fullname = JSON.parse(response[i].fullname)
//This will convert the strings into objects before Ng-Repeat Runs
//Now we will set customers = to response
$scope.customers = response
}
})
Now NG-Repeat was designed to loop through arrays and not objects so your nested NG-Repeat is not necessary... your html should look like this:
现在 NG-Repeat 被设计为遍历数组而不是对象，因此您不需要嵌套的 NG-Repeat...您的 html 应如下所示：
<div ng-repeat="customer in customers">
<div class="user-info">
{{ customer.fullname.first_name }} {{ customer.fullname.last_name }}
</div>
This should fix your issue :)
这应该可以解决您的问题:)
回答by tymeJV
You'd have to convert the string value to an object (why it's a string, no idea)
您必须将字符串值转换为对象（为什么它是字符串，不知道）
.fullname = JSON.parse(data.fullname); //replace data.fullname with actual object
Then use the object ngRepeatsyntax ((k, v) in obj):
然后使用对象ngRepeat语法 ( (k, v) in obj)：
<div class="user-info" ng-repeat="(nameType, name) in customer.fullname">
{{nameType}} : {{name}}
</div>
回答by Dragos Rusu
My advise is to use a filter like:
<div class="user-info"... ng-bind="customer | customerName">...
我的建议是使用如下过滤器：
<div class="user-info"... ng-bind="customer | customerName">...
The filter would look like:
过滤器看起来像：
angular.module('myModule').filter('customerName', [function () {
'use strict';
return function (customer) {
// JSON.parse, compute name, foreach strings and return the final string
};
}
]);
回答by Rakesh
I had same problem, but i solve this stuff through custom filter...
我有同样的问题，但我通过自定义过滤器解决了这个问题......
JSON :
JSON :
.........
"FARE_CLASS": "[{\"TYPE\":\"Economy\",\"CL\":\"S \"},{\"TYPE\":\"Economy\",\"CL\":\"X \"}]",
.........
UI:
用户界面：
<div class="col-sm-4" ng-repeat="cls in f.FARE_CLASS | s2o">
<label>
<input type="radio" ng-click="selectedClass(cls.CL)" name="group-class" value={{cls.CL}}/><div>{{cls.CL}}</div>
</label>
</div>
CUSTOM FILTER::
自定义过滤器::
app.filter("s2o",function () {
return function (cls) {
var j = JSON.parse(cls);
//console.log(j);
return j;
}
});
