AngularJS : How to remove text from a JSON feed?

Question

I am using ajax (via AngularJS) to grab a Google calendar feed and list the latest events on my homepage. This works great, however, Google seems to append the string "Event Status: confirmed" to the events listing at the end of the date. This is what it looks like:

I can't seem to hide "Event Status: confirmed" from the feed. Is there a way I can use AngularJS filter to remove that string from my JSON feed?

The "Event Status: confirmed" text is coming from the event.summary.$tproperty in the JSON feed. This is what the actual property value looks like:

"$t": "When: Sun Nov 15, 2015<br />\n\n\n<br />Event Status: confirmed""

Here's my HTML with AngularJS ng-repeat directive looping through the feed:

<section id="calendarListing" class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Upcoming Events</h3>
                    </div>
                        <div class="panel-body" ng-controller="CalCtrl">
                        <ul class="list-unstyled" ng-repeat="event in events.feed.entry | reverse | limitTo: 3 ">
                    <li><h4 ng-bind-html="event.title.$t"></h4>
                        <span ng-bind-html="event.summary.$t"></span>
                    </li>    
                </ul>
                        </div>
                        <div class="panel-footer"><a href="calendar.php"><i class="fa fa-arrow-circle-right"></i> View full calendar</a></div>
                </div>
</section><!--/events-->

Here is my script:

var calApp = angular.module("calApp", ['ngSanitize']);
var feedUrl = 'https://www.google.com/calendar/feeds/ogmda.com_89pas0l9jbhpf053atd83hdj30%40group.calendar.google.com/public/basic?alt=json';

calApp.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

calApp.controller('CalCtrl', function($http, $scope) {
    $http.get(feedUrl).success(function(data) {
        $scope.events = data;
        console.log(data);
        });
});

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("calendarListing"),['calApp']);
});

what does the actual html look like? Should be able to do this with css — charlietfl
– charlietfl, Commented Oct 25, 2015 at 22:32
Can you give an actual example of what the JSON looks like for that $t property? — Phil
– Phil, Commented Oct 25, 2015 at 22:33
This is what the actual example looks like: "$t": "When: Sun Nov 15, 2015<br />\n\n\n<br />Event Status: confirmed" — redshift
– redshift, Commented Oct 25, 2015 at 23:41
I think you should migrate to using APIv3 or an ICS file as these feeds are going away on Nov 18th: support.google.com/calendar/answer/6285065 — luc
– luc, Commented Oct 29, 2015 at 17:01

Phil · Accepted Answer · 2015-10-25 23:53:44Z

1

I'd probably just go with a CSS solution. Seems easier that trying to parse out the text. Something like

<span class="eventSummary" ng-bind-html="event.summary.$t"></span>

and in CSS

.eventSummary {
    display: block; /* or inline-block */
    white-space: nowrap;
    overflow: hidden;
    height: 1.3em; /* or whatever your line-height is */
}

If you're still keen on actually removing the text, I'd go with a custom filter

.filter('singleLine', function() {
    return function(html) {
        var br = html.indexOf('<br');
        return br === -1 ? html : html.substring(0, br);
    };
})

and in your template

<span ng-bind-html="event.summary.$t | singleLine"></span>

edited Oct 25, 2015 at 23:53

answered Oct 25, 2015 at 23:47

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

AngularJS : How to remove text from a JSON feed?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related