How to make output data dynamic structure using AngularJS?

Question

I'm new in angularJS and making a simple app, but I am finding it difficult to create output with dynamic data.

Here my html -

<div ng-app="MyApp">
  <div ng-controller="TabsDemoCtrl">
    <div ng-controller="TabsDemoCtrl">  
      <h1> How to make output dynamic data like this?</h1>
      <table ng-repeat="customize in data">
        <tr>
          <th colspan="2">{{customize.product.name}}</th>
        </tr>
        <tr>
          <td colspan="2">Assets</td>
        </tr>
        <tr>
          <td>{{ How to bind ouput dynamic attribute data ? }}</td>
          <td>{{ How to bind ouput dynamic subattribute ? }}</td>
        </tr>
      </table>

    </div>
  </div>
</div>

and here my JS -

angular.module('MyApp', [
    'ui.bootstrap']);

(function(MyApp) {
  'use strict';
  MyApp.controller('TabsDemoCtrl', ['$scope', function($scope) {
    // categories
    $scope.data = [
    {
        product : {
            name  : 'Product 1'
        },
        assets : {
            color : {
                black : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png'
            }
        }
    },
    {
        product : {
            name  : 'Product 2'
        },
        assets : {
            soles : {
                black : '/file/840ec1ff-6d27-40af-b4ca-277aa09ad147.png',
                red : '/file/1970f2e2-b7a0-439c-98d9-b9ea1604c227.png'
            },
            material : {
                black : '/file/aebe8f68-60fd-4fda-bd46-00e80f190ba2.png',
                green : '/file/e225e20d-5b97-4a60-8337-0551064a8d8c.png'
            },
            lining : {
                blue : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png',
                red : '/file/280fecb5-ebe5-47cb-85f4-4d1bf6dd8ed0.png'
            }
        }
    }
];


  }]);
})(angular.module('MyApp'));

I tried to make an output of dynamic structure data in this link demo but it doesn't show.

So how to make view with this dynamic data ?

Answer 1

quick hint: you can use something like

<li ng-repeat="(key,val) in product.assets"></li>

to render all keys and values. now you have to check whether the val is an object or a string. if its an object you have to render another level of KV pairs...

<div>
    <ul>
      <li ng-repeat="product in data">
        <p>{{product.product.name}}</p>
        <ul>
          <li ng-repeat="(key,val) in product.assets">
          {{key}}
            <ul>
              <li ng-repeat="(key,val) in val">
                {{key}} => {{val}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

I'll let you do the template to display recursive data and the data validation. do not use (key,val) template recursion on strings!!

refer to this: http://jsfiddle.net/brendanowen/uXbn6/8/

Answer 2

Check this link http://plnkr.co/edit/gFSXHT0YUzD0lE9Y7wWZ?p=preview Hope it will solve your problem.

Before rendering JSON data make it sure the format is correct. here is the online json parser https://jsonformatter.curiousconcept.com/

Let me know then if it solve your issue. Thanks