How to output elements in a JavaScript object?

Question

Object defined in scope:

$scope.products = [ { name: 'custom', category: { name:'custom', templateAttribute: [ {attribute: 'material'}, {attribute: 'soles'}, {attribute: 'size'} ] } } ];

HTML:

<table class="table" ng-repeat="attr in products.category.templateAttribute"> <tbody> <tr> <td> <input value="{{attr.attribute}}" /> </td> <td> <input placeholder="name" ng-model="product.attributes[attr.attribute].name" /> </td> <td rowspan="2"> <button type="button" ng-click="addItem(product.category.templateAttribute, attr)"> add </button> </td> </tr> </tbody> </table>

What I want output to look every attribute has input form

How it seems like it should work:

<table class="table" ng-repeat="attr in products.category.templateAttribute">

How to fix its?

@KornelitoBenito — If it was JSON then it wouldn't start with $scope.products =. If it was JSON then the property names would be strings. If it was JSON then the strings would be delimited by double quote characters. If it was JSON then it wouldn't be trailed by a semi-colon. — Quentin, CommentedDec 28, 2015 at 10:47
@KornelitoBenito: No, it isn't. It's a JavaScript object initializer. JSON is a textual notation used for data interchange which is based on JavaScript initializer notation, but is a subset of it. If you're writing source code, and not dealing with a string, you're not dealing with JSON. — T.J. Crowder, CommentedDec 28, 2015 at 10:47

Arun Ravindranath · Accepted Answer · 2015-12-28 11:05:38Z

As $scope.product is an array $scope.product.category itself is undefined

it must be like

<table class="table" ng-repeat="attr in products[0].category.templateAttribute">

if products is dynamic

<table class="table" ng-repeat="product in products"> <tr> <td ng-repeat="attribute in product.category.templateAttribute"> <td><input value="{{attr.attribute}}" /></td> <td> <input placeholder="name" ng-model="product.attributes[attr.attribute].name" /> </td> <td rowspan="2"> <button type="button" ng-click="addItem(product.category.templateAttribute, attr)"> add </button> </td> </td> </tr> </table>

so table will be repeating according to the objects in $scope.products array

Sergey Lemeschencko · Accepted Answer · 2015-12-28 10:55:06Z

If provided HTML code is your whole template, there is an error in assuming that ng-repeat="attr in products.category.templateAttribute" iterates over "templateAttribute" array in products[0].category object.

You actually need two ng-repeats, one to iterate over products array, and another to iterate over category.templateAttribute in each product:

<table class="table" ng-repeat="product in products"> <tr> <td ng-repeat="attr in product.category.templateAttribute"> <input value="{{attr.attribute}}" /> ..... </td> </tr> </table>

Collectives™ on Stack Overflow

How to output elements in a JavaScript object?

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related