0

I am trying to fetch data from multiple feeds and store it in an array.

the urls:

var URLS = [
  "https://www.wired.com/feed/rss",
  "http://feeds.bbci.co.uk/news/rss.xml",
  "http://www.nasa.gov/rss/dyn/breaking_news.rss"
];

Array i want to populate:

constructor() {
    super()
    this.state = {
      data: []
    }
  }

The function to extract title and description from feeds

extractData(text) {
    var doc = new DOMParser().parseFromString(text, 'text/xml');
    var items_array = [];
    var items = doc.getElementsByTagName('item');

    for (var i = 0; i < items.length; i++) {
      items_array.push({
        title: items[i].getElementsByTagName('title')[0].lastChild.data,
        description: items[i].getElementsByTagName('description')[0].lastChild.data,                  
      })
    }
    return items_array;
  }

The code to fetch the data:

fetchData() {
    return Promise.all(
      URLS.map(url => fetch(url)
        .then(response => response.text())
        .then(responseData => {
          this.setState(
            (prevState, props) => ({
              data: [...prevState.data, this.extractData(responseData)]
            })
          );
        })
        .catch(err => console.error(err))
      )
    ).then(() => { /* do some thing */ }, err => { console.error(err) }) 
  }

The problem is that the data is not showing up in the list but if I add test data like the code below it displays just fine: data: [...prevState.data, {title: "t1", description: "d1"}, {title: "t2", description: "d2"}]

1 Answer 1

2

The logic seems to work just fine, however you are not using the spread operator correctly:

this.setState(
  (prevState, props) => ({
    data: [...prevState.data, ...this.extractData(responseData)]
  })
)

const data = [1,2,3,4]
const extraElements = [5,6,7,8]
const result = [...data, ...extraElements]

console.log(result)

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.