Blog

Process to get data from Youtube XML : Part 7

February 4, 2019/ stw / Javascript frameworks, Reactnative / 0 comments

Process To Get Data From Youtube – If you will see youtube video.xml url, there are many xml node. We  need only all video id , thumbnail url to display image and Title to show on top of Card

XML display data different way than Json. So first we parse xml data and use text to get its value.

First install xmldom so run command

npm install -S xmldom

So after last import line, after a line line break  add parse function which will help to parse data of xml

1. const DOMParser = require(‘xmldom’).DOMParser;

before component start. For example

…..

const DOMParser = require(‘xmldom’).DOMParser;

class VideoList extends Component {

………

First you need to understand few things before we start coding. In this process I am going to use ComponentWillMount, fetch, and state

componentWillMount: this is a lifecycle method . It invoke immediately before mounting occurs.

Fetch: Fetch Networking api used in react native to get content from arbitrary URL

For more details please take a look here

Now in our next process we will use componentWillMount before render function and so

So in VideoList.js remove condole.log(this.props.playlistid); and start writing componentWillMount()

componentWillMount should be called before render() function of component

But before componentWillMount function we will define a state video as array. Because after  fetch were are going to get data in array so open VideoList.js and add before render() function

1. state = { videos: [], }
2. componentWillMount() {
3. const playerid = this.props.playlistid; /* to get playlist id value*/
5. /* Now make url of youtube video smal feed */
6. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=’ + playerid;
8. /* now its time to fetch data from url */
10. fetch(url)
11. .then(Data => Data.text())
12. /* now we will run console.log to check if data coming after fetch */
13. .then(DataText => console.log(DataText));
14. }

Now refresh simulator and you will see xml data in condole.

But this data is not in array and it is not useful for us to setState with array. As you can see we are getting whole xml as it is. To process our video listing we need a array of Title, Image and Video id. To process this we will process to parse data using a helper function . so create a function called getXMLData

So in componentWillMount function add a new function

1. componentWillMount() {
2. const getXMLData = (listdata) => {
4. }
7. ……

No we will expand our function getXMLData. In this function i have passed a parameter which is used to get data which we get from fetch and parse it

So

1. const getXMLData = (listdata) => {
2. const parseData = new DOMParser().parseFromString(listdata, ‘text/xml’);
3. const allVideoTitle = parseData.getElementsByTagName(‘title’);
4. const allVideoId = parseData.getElementsByTagName(‘yt:videoId’);
5. const allThumbnails = parseData.getElementsByTagName(‘media:thumbnail’);
6. /* define a new array */
8. const finalArray = [];
10. /* push all items in one array */
12. for (const i = 0; i < allVideoId.length; i++) {
13. finalArray.push({
14. title: allVideoTitle[i].textContent,
15. id: allVideoId[i].textContent,
16. thumbnail: allThumbnails[i].getAttribute(‘url’)
17. });
18. }
19. return finalArray;
20. };

In above function you can see we have passed our listdata paramer in parseFromString and then we are getting title, video id and Thumbnail by tag name of xml. But is is not enough because we need a series of array in which we can get all values in one array

So I created a variable with name finallArray as array then using for function I have adding each values in finalArray using push function

Push: This  method help to add new item in  array

Now our function returning array of all items which we need in one array. Now we will call this function to setState of Video array state. It may be little confusing but no need to worry much about it . I will show you further process

Now go to this line of componentWillMount function

.then(DataText => console.log(DataText));

And now remove console.log(DataText) and replace with

1. .then(DataText => this.setState({ videos: getXMLData(DataText) }));

Here we have set state video with array using our helper function getXMLData passing Data of fetch

Now if you need to check what is result of this video state you can write a line of console.log in render function of component.

So go to render function of component and write like this

render() {

   console.log(this.state);

   return (

………

If you will open console you will see result as video array

Now remove console.log from render function.

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
3. import CardWrapper from ‘../common/CardWrapper’;
4. import CardInner from ‘../common/CardInner’;
6. const DOMParser = require(‘xmldom’).DOMParser;
8. class VideoList extends Component {
9. state = { videos: [], }
10. componentWillMount() {
11. const getXMLData = (listdata) => {
12. const parseData = new DOMParser().parseFromString(listdata, ‘text/xml’);
13. const allVideoTitle = parseData.getElementsByTagName(‘title’);
14. const allVideoId = parseData.getElementsByTagName(‘yt:videoId’);
15. const allThumbnails = parseData.getElementsByTagName(‘media:thumbnail’);
16. /* define a new array */
17. const finalArray = [];
18. /* push all items in one array */
19. for (const i = 0; i < allVideoId.length; i++) {
20. finalArray.push({
21. title: allVideoTitle[i].textContent,
22. id: allVideoId[i].textContent,
23. thumbnail: allThumbnails[i].getAttribute(‘url’)
24. });
25. }
26. return finalArray;
27. };
29. const playerid = this.props.playlistid; /* to get playlist id value*/
30. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=’ + playerid;
31. fetch(url)
32. .then(Data => Data.text())
33. .then(DataText => this.setState({ videos: getXMLData(DataText) }));
34. }
35. render() {
36. return (
37. <View>
38. <CardWrapper>
39. <CardInner>
40. <Text>For Title</Text>
41. </CardInner>
42. <CardInner>
43. <Text>For Image</Text>
44. </CardInner>
45. <CardInner>
46. <Text>For Buttons</Text>
47. </CardInner>
48. </CardWrapper>
49. </View>
50. );
51. }
52. }
53. export default VideoList;