angularjs how to search in search in json object in html template

Question

In Angularjs I am trying to search in json data which i am using in html template. My input json data is as below,

var data = JSON.parse(
            '{
                "Project": {
                    "_attributes": {
                        "gui": "ProjectGui",
                        "prjname": "MyProject"
                    },
                    "stringarr": [
                        {
                            "_attributes": {
                                "name": "Project.comments"
                            },
                            "_text": "MyComments"
                        },
                        {
                            "_attributes": {
                                "name": "Project.classpath"
                            },
                            "_text": "D:\\Project\\bin\\config.jar"
                        }
                    ]
                }
            }'
);

And i am using this for displaying and editing name in my html template, which is working fine. When I edit input box , it reflects the changes in json data as well, that's exactly I want.

Name: <input type="text" ng-model="data.Project._attributes.prjname"><br>

But I also want to display and edit comments in same way but not getting idea how to achieve this. The difference is, I have to search within json data where data.Project.stringProp[i]._attributes.name is "Project.comments" and take "_text" as input for displaying & editing. I have tried following that is not working.

Comments: <input type="text" ng-repeat="x in data.Project.stringProp" ng-model="x">{{x._text}}<br>

Please suggest , what would be the best possible way to do this. I think it can be done using a get function and ng-change function but that approach will be lengthy and may put performance overheads.

Thanks

JSON is a serialized representation of an object and is a string. Json object or json data don't make sense. You can encode/serialize/stringify an object and get JSON. You can decode/deserialize/parse JSON and get an object. — AndrewR
– AndrewR, Commented Mar 20, 2018 at 5:02
Do you have any control over the data model you are getting back? Seems it would be easier to do if you could just pass back a comments property. — AndrewR
– AndrewR, Commented Mar 20, 2018 at 5:04
Yes @Andrew, i have control over the data model. But passing back "comments" and update , also need searching. Can it be done using angularjs filter ? — usersam
– usersam, Commented Mar 20, 2018 at 5:11

Kavindra · Accepted Answer · 2018-03-20 05:11:12Z

1

You can either implement a filter for filter _text value if the name is 'Project.comments', or you can simply add an ng-if statement.

Comments: <input type="text" ng-repeat="x in data.Project.stringarr" ng-if="x._attributes.name == 'Project.comments'">{{x._text}}<br>

answered Mar 20, 2018 at 5:11

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

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

2 Comments

usersam Over a year ago

Thanks @KKK, its good idea. But it is not working for some reason. I have created following plnkr "plnkr.co/edit/af1TsBBA3CtSZq8eAx5R?p=preview" to test this.

Kavindra Over a year ago

@sand, yes, since this is an input field you should put x._text for ng-model. Sorry, my mistake.

usersam · Accepted Answer · 2018-03-20 06:11:00Z

0

I have resolved this by using ng-repeat and ng-if for specified condition.

  <body ng-controller="Controller">
    Name: <input type="text" ng-model="data[0].Project._attributes.prjname"><br>
    check: <div ng-repeat="x in data[0].Project.stringarr" ng-if="x._attributes.name == 'Project.comments'">{{x._text}}</div><br><br>
    comments : <input type="text" ng-repeat="x in data[0].Project.stringarr" ng-if="x._attributes.name == 'Project.comments'" ng-model="x._text"><br>
  </body>

Please find the following plunkr

https://plnkr.co/edit/3jUaw73cHgAtbBZr8LuJ?p=preview

answered Mar 20, 2018 at 6:11

usersam

1,2654 gold badges33 silver badges67 bronze badges

Collectives™ on Stack Overflow

angularjs how to search in search in json object in html template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related