Using ng-repeat to loop through an array that is formatted like a string

Question

I have recently started adding Angular to an old app I made. Part of the app stores a json encoded array in a single cell in a mySql table. I know this is frowned upon, but I'm 100% sure it won't come back to bite me later. In the past I've just been able to do a json_decode on the array and output the values in an ordered list. Since I've included Angular, the data is being encoded and echoed at the end of the php file. It is then picked up by the Angular code and I'm able to loop through this deeply nested multidimensional object until it gets to this part...

"sub_items":"[\"subOne\",\"subTwo\",\"subThree\"]"

The closest I can get is to output the string including all the backslashes, brackets and quotes which makes sense because it is a string.

I've tried doing a json_decode on every instance of sub_items, but it's not working. I think that's because the whole thing just gets encoded again.

How might I be able to loop through this array?

EDIT

I have made some progress with the following based on comments in the answer from @Yaser Adel Mehraban.

foreach($master as $index => $item) {
    if($category == $item['category']) {
        $sub = [];
        $sub['sub_items'] = json_decode($item['sub_items']);
        unset($item['sub_items']);
        array_push($items, $item, $sub);
    }
}

This returns

...created_at":"2016-11-01 14:19:07"},{"sub_items":["subOne","subTwo","subThree"...

The formatting of the array I was having trouble with is correct now I think, but it's sitting outside the item. I have tried to array_merge as well, but it adds a new key which would force an unnecessary ng-repeat to step down I think. Suggestions...


Show source
| php   | arrays   | angularjs   | json   2017-01-02 23:01 3 Answers

Answers to Using ng-repeat to loop through an array that is formatted like a string ( 3 )

  1. 2017-01-02 23:01

    UPDATED:

    You should decode using array options and then iterate through them using ng-repeat, however to get decode working you first need to split your string and get the second part:

    $subItemsStr = explode('"sub_items":"[\"subOne\",\"subTwo\",\"subThree\"]"')[1];
    $subItems = json_decode($subItemsStr, true);
    

    Then you can use it.

  2. 2017-01-03 09:01

    Try this :

    var myApp = angular.module('myApp',[]);
    
    myApp.controller('MyCtrl',function($scope) {
      var jsonObj = { 
        "sub_items":"[\"subOne\",\"subTwo\",\"subThree\"]"
      }
    
      var jsonString = jsonObj.sub_items;
      $scope.items = JSON.parse(jsonString);
    });
    
    <div ng-app="myApp" ng-controller="MyCtrl">
      <div ng-repeat="item in items">
        {{item}}
      </div>
    </div>
    
  3. 2017-01-03 20:01

    Finally got it sorted with the following change...

    foreach($master as $index => $item) {
        foreach($item as $key => $value) {
            if($key == 'sub_items') {
                $sub = json_decode($value);
                unset($item['sub_items']);
                $item['sub_items'] = $sub;
            }
        }
        if($category == $item['category']) {
            array_push($items, $item);                  
        }
    }
    

    This returned...

    ...created_at":"2016-11-01 14:19:07","sub_items":["subOne","subTwo","subThree"...
    

    No longer treated as a string it's easy to loop through with Angular. Thanks!

Leave a reply to - Using ng-repeat to loop through an array that is formatted like a string

◀ Go back