Angular.js ng-repeat array shows as json

Question

I have an issue where I'm trying to display an array in Angularjs using ng-repeat but its showing the entire json array and not only the text inside.

This is my array

$scope.problems = [

    {
        problem: "problem1",
        works: [
            "a0",
            "a9"
        ]
    }
]

And this is where I want to display it

<li ng-repeat="works in problems | filter: searchCard">{{works}}</li>

Now the {{works}} tag shows this in the live document:

{"problem":"probleem1","works":["a0","a9"]}

According to most tutorials and things i've seen its supposed to display the a0 and a9 not the entire json line.

My second question which might be completely different is, how can I display the text correctly but also hide all of them until a person has used the input to search the "works" input field.

Answer 1

when you have objects Array on ng-repeat you have to select that object params; in this sample our object params are "problem" and "works"

also in our object we have "string array" and string array not have params because that we use it directly in this sample {{work}} is object of string array.

<li ng-repeat="item in problems | filter: {problem: searchCard}">
  {{item.problem}}
  <ul>
    <li ng-repeat="work in item.works">{{work}}</li>
  </ul>
</li>

Answer 2

you can use the nested ng-repeats like @Maher mentioned. also, in order to hide data until searchCard is typed, you can use ng-if directive in nested ui .

<li ng-repeat="item in problems | filter: searchCard">
  {{item.problem}}
  <ul ng-if="searchCard">
    <li ng-repeat="work in item.works">{{work}}</li>
  </ul>
</li>