Angularjs convert string to object inside ng-repeat

Question

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

{"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

<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?

Robo Rick · Accepted Answer · 2015-09-28 21:35:50Z

7

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("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:

<div ng-repeat="customer in customers">    
<div class="user-info">
   {{ customer.fullname.first_name }} {{ customer.fullname.last_name }}
</div>

This should fix your issue :)

answered Sep 28, 2015 at 21:35

Robo Rick

7896 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kotanet Over a year ago

Yep, that works... but i think there are some problems in PDO querry or in sql... i don't uderstand, why do I get it as a string. Will try to solve it. If not - stick with your advice

tymeJV · Accepted Answer · 2015-09-28 20:59:16Z

2

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 ngRepeat syntax ((k, v) in obj):

<div class="user-info" ng-repeat="(nameType, name) in customer.fullname">
    {{nameType}} : {{name}}
</div>

answered Sep 28, 2015 at 20:59

tymeJV

105k14 gold badges165 silver badges158 bronze badges

4 Comments

Kotanet Over a year ago

I don't know if it's a string, but it does not work with ng-repeat, so I think, it's a string. Do I have to iterate through the whole scope object to convert every string value? Can not it be done in template?

tymeJV Over a year ago

@Sobakinet - I'd say step one is finding out if that's an actual string or not - if it's not - you need to use the correct ngRepeat syntax - if it is, then you could create a filter to convert it - but why not just convert it via the server before the client gets it?

Kotanet Over a year ago

is the ng-repeat syntax in last code snippet in my question not correct?

tymeJV Over a year ago

@Sobakinet -- That's the syntax for an array [1,2,3] - for an object, it's different {name:"Justin", number:3} - (k, v) in obj

Dragos Rusu · Accepted Answer · 2015-09-28 21:00:31Z

1

My advise is to use a filter like: <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
    };
  }
]);

answered Sep 28, 2015 at 21:00

Dragos Rusu

1,57814 silver badges14 bronze badges

Comments

Rakesh · Accepted Answer · 2016-06-20 06:04:44Z

1

I had same problem, but i solve this stuff through custom filter...

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;
    }

});

answered Jun 20, 2016 at 6:04

Rakesh

3291 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angularjs convert string to object inside ng-repeat

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related