CODEWITHSUNDEEP
javascriptreactjsapi
James
James

Reputation: 13

How to map this type of API data?

I'm trying to map a data from API, but I have some problems with it. How can I push only names to array? There is no property called "name" or something like this.

componentDidMount() {
    let url = `https://contact-browser.herokuapp.com/contacts`;
    let arr = []
    fetch(url).then(resp => resp.json()).then((data) => arr.push(data),
        this.setState({
            data: arr
        })
    );
}

    {this.state.data.map((person) => {
        return <li>{person}</li>
    })}

Upvotes: 1

Views: 942

Answers (2)

JO3-W3B-D3V
JO3-W3B-D3V

Reputation: 2134

Description

Okay, so having looked at the data returned from that URL, it returns an object, therefore, a simple way would be to use Object.keys. As you can see, I'm using the map function to produce a new array from the array produced by Object.keys, from there passing the array produced from the map function into the log function, just for a little demo.

I'm not saying this is the most efficient/performance friendly way ever, however it is a clean, simple, clear & concise way to do things. 

const url = `https://contact-browser.herokuapp.com/contacts`;
const log = args => console.log(args);

fetch(url).then(r => r.json()).then(d => log(Object.keys(d).map(k => d[k])));

Edit

As mentioned in the comments, if you want to be more efficient and you don't care about the keys, you could just use Object.values, with this approach it's just less data to deal with, less processing, etc. 

const url = `https://contact-browser.herokuapp.com/contacts`;
const log = args => console.log(args);

fetch(url).then(r => r.json()).then(d => log(Object.values(d)));

Upvotes: 1

HMR
HMR

Reputation: 39310

Looking at the data source it sort of looks like this:

{
  "1": "Jason Brown",
  "2": "Angela Houston",
  "3": "Angela Maynard",
  "4": "Natasha West",
  "5": "Christina Lee",
  "6": "Bryan Baker",
  //other stuff
}

You can try the following:

componentDidMount() {
  let url = `https://contact-browser.herokuapp.com/contacts`;
  let arr = []
  fetch(url).then(resp => resp.json()).then((data) => 
      this.setState({
          data: Object.values(data)
      })
  );
}

Note that Object.values, Object.entries, Object.keys, for ... in and the sorts are not guaranteed return data in any order so if you want to order by the key you can do the following:

componentDidMount() {
  let url = `https://contact-browser.herokuapp.com/contacts`;
  let arr = []
  fetch(url).then(resp => resp.json()).then((data) => 
      this.setState({
          data: Object.entries(data)
            .map(([key,val])=>[Number(key),val])//make key a number
            .sort(([a],[b])=>a-b)//sort by ket
            .map(([,val])=>val)//do not use the key for data
      })
  );
}

However; when you render your data array you need a unique key or React will give you a warning. To prevent this warning you can provide the object key with your data:

componentDidMount() {
  let url = `https://contact-browser.herokuapp.com/contacts`;
  let arr = []
  fetch(url).then(resp => resp.json()).then((data) => 
      this.setState({
          data: Object.entries(data)
            .map(([key,val])=>({key:Number(key),val}))//make key a number
            .sort((a,b)=>a.key-b.key)//sort by key
      })
  );
}

{this.state.data.map(({key,val}) => {
  return <li key={key}>{val}</li>
})}

Upvotes: 0

Related Questions