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.

For a second question, you should open a new thread, with only the code needed to solve that second issue — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented May 31, 2017 at 13:40

Maher · Accepted Answer · 2017-05-31 13:57:02Z

3

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>

edited May 31, 2017 at 13:57

answered May 31, 2017 at 13:31

Maher

2,5471 gold badge21 silver badges33 bronze badges

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

4 Comments

Stolenbows Over a year ago

Hey! Thanks man it works like intended, quick follow up question if I can, can I hide the list untill someone uses the filter: searchCard I want the array to be hidden untill a user searches for example A1 and it'll show A1 in the text? I'm thinking it might need an ng-if but I have no clue how.

Maher Over a year ago

you have to Specified param you are searching

Stolenbows Over a year ago

I couldnt edit my comment anymore but the user below this post has answered my search question, thanks to both of you!

Maher Over a year ago

you have to Specified param you are searching, for example you want search about problem , use this filter: {problem: searchCard}

Sachila Ranawaka · Accepted Answer · 2017-05-31 13:35:31Z

0

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>

answered May 31, 2017 at 13:35

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

Deblaton Jean-Philippe Over a year ago

I don't get why you added the ng-if

Sachila Ranawaka Over a year ago

as for my understanding OP says

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

Collectives™ on Stack Overflow

Angular.js ng-repeat array shows as json

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related