Using the .map method to filter through JSON data

Question

Using the .map method to filter through JSON data

I'm facing some challenges filtering a .json file to exclude private videos on an app related to a YouTube channel. There are certain videos marked as private that I do not want to display within the app. Can someone assist me in properly filtering the .json data?

Currently, when utilizing the code snippet below to filter the data, it returns an empty json object. However, if I remove the .map function, it displays the complete list of videos including the private ones.

getPlayListVideos(listId: string) {
    return this.http.get('https://www.googleapis.com/youtube/v3/playlistItems?key=' + this.apiKey + '&fields=items/snippet/resourceId/videoId,items/snippet/publishedAt,items/snippet/title,items/snippet/thumbnails/high/url&playlistId=' + listId +'&part=snippet,id&maxResults=25')
    .map((res) => {
      return res.json()['items'].filter(item => {
        if(item.snippet.title === 'Private video'){
          return false;
        }
       });
    })
}

javascript typescript youtube-api ionic3

Answer 1

Answer №1

To avoid filtering the current item, you should return true. If you don't return anything in that case, it will be treated as false or undefined implicitly. Here is how you can achieve this:

if(item.snippet.title === 'Private video'){
    return false;
} else {
    return true;
}

Alternatively, you can simplify it to

return item.snippet.title !== 'Private video'

.

For better formatting, I prefer writing it like this:

  getPlayListVideos(listId: string): any[] {
       return this.http.get('https://www.googleapis.com/youtube/v3/playlistItems?key=' + this.apiKey + '&fields=items/snippet/resourceId/videoId,items/snippet/publishedAt,items/snippet/title,items/snippet/thumbnails/high/url&playlistId=' + listId + '&part=snippet,id&maxResults=25')
              .map(res => res.json()['Items'])
              .map((items: any[]) => items.filter(item => item.snippet.title !== 'Private video'))
  }

Answer 2

To avoid filtering the current item, you should return true. If you don't return anything in that case, it will be treated as false or undefined implicitly. Here is how you can achieve this:

if(item.snippet.title === 'Private video'){
    return false;
} else {
    return true;
}

Alternatively, you can simplify it to

return item.snippet.title !== 'Private video'

.

For better formatting, I prefer writing it like this:

  getPlayListVideos(listId: string): any[] {
       return this.http.get('https://www.googleapis.com/youtube/v3/playlistItems?key=' + this.apiKey + '&fields=items/snippet/resourceId/videoId,items/snippet/publishedAt,items/snippet/title,items/snippet/thumbnails/high/url&playlistId=' + listId + '&part=snippet,id&maxResults=25')
              .map(res => res.json()['Items'])
              .map((items: any[]) => items.filter(item => item.snippet.title !== 'Private video'))
  }

Using the .map method to filter through JSON data

Answer №1

Similar questions

Angular Swiper Integration: Maintaining Scope Inside Configuration Callback

Custom AngularJS menu directive using a JSON file to generate submenus

Ways to resolve encoded titles in Youtube API search results

Using jQuery to input a value that returns the [object Object]

Unable to locate "angular", attempting to retrieve and validate values from the HTML form

retrieve the source code from all .js links found within the document

Utilizing the Ternary Operator for conditional rendering in React is causing issues with HTML elements

Guide on updating and storing changes in a JSON file named 'file.json' using jQuery or JavaScript

What is the reason behind the prevalence of using export class xxx in angular4 projects instead of export default class xxx?

Swap out the traditional for loop with a LINQ query utilizing the any method

Invoke a function within the React library through ReactDOM.render

Grouping Columns in an HTML Table using Angular 4

Tic-Tac-Toe: The square's value stays unchangeable

Obtain form data as an object in Vue when passed in as a slot

Struggling to get JQuery timing events to function properly?

Is it necessary to bump the major version if I make updates to a react module that does not affect existing code functionality, but may cause Jest snapshot tests to break?

When two-dimensional arrays meet destructuring, it results in a type error

What is the reason for my JSON reference returning as undefined?

Exploring the Overlapping of Objects in Three.js

Tips for editing bootstrap-vue table columns using non-Latin characters?