Extending the News Feature to Show results from multiple organisations
News Tab in Susper was earlier implemented to show results only from a single organisation using site: modifier for query facet. In this blog I will discuss about how I have modified the current News Tab to show results from various News organisation like BBC, Al Jazeera, The Guardian etc. Implementation: Step 1: Creating a JSON file to store organisations detail: We need to decide from which organisations we will fetch results using YaCy Server and then display it in Susper. We have provided a JSON file where user can add or delete News sources easily. The results will only limited to the organisations which are present in the JSON file. Step 2: Creating a service to fetch details from JSON file: Now after creating the the JSON file we need a service which will fetch results from the JSON file according to our need. This service will be a simple Angular Service having a class GetJsonService and it will access the newsFile.json and map the results in JSON format. Here is the service which does this task for us. Step 3: Creating a service to fetch news accordingly: Now after fetching the JSON result we need a service to fetch the News Results from YaCy Server. I have created a separate service to do this task where I have fetched results using site: modifier from each organisation and returned the results.The code for the news.service.ts is below. export class NewsService { constructor(private jsonp: Jsonp) { } getSearchResults(searchquery, org) { let searchURL = 'https://yacy.searchlab.eu/solr/select?query='; searchURL += searchquery.query + ' site:' + org; let params = new URLSearchParams(); for (let key in searchquery) { if (searchquery.hasOwnProperty(key)) { params.set(key, searchquery[key]); } } //Set other parameters return this.jsonp .get(searchURL, {search: params}).map(res => res.json()[0] ).catch(this.handleError); } Step 4: Updating the results section: Now we have a service that gives results from a single organisation and a JSON list of organisations. Now in results.component.ts we can simply subscribe to getJsonService and in a loop we will call getNewsService by changing the organisation in every iteration. We will then check that whether we are getting the valid results or not (undefined). The results which are not valid can cause errors when we will try to read any field of an undefined variable. Then, We will simply append the 2 result items from each organisation in an empty array and later use this array to show results. this.getJsonService.getJSON().subscribe(res => { this.newsResponse = []; for (let i = 0; i < res.newsOrgs.length; i++) { this.getNewsService.getSearchResults(querydata,res.newsOrgs[i].provider).subscribe( response => { if (response.channels[0].items[0] !== undefined) { this.newsResponse.push(response.channels[0].items[0]); } if (response.channels[0].items[1] !== undefined) { this.newsResponse.push(response.channels[0].items[1]); } } ); } }); The newsClick() function is activated on clicking News Tab and it updates the query and its details in store. Step 5 Displaying the results: Now we will modify the results.component.html to show results from new newsResponse array which have 2 results each from 5 organisations. For this we will use each item of newsResponse using *ngFor and display its title,link…
