How to get distinct values from an array of fetch API output

Question

I am trying to fetch the json data from an API and split its value and populate the value in my React project.The code for server API is as shown below:

const clone = require('clone')
const config = require('./config')

let db = {}

const defaultData = {
  categories: [
      {
        name: 'react',
        path: 'react'
      },
      {
        name: 'redux',
        path: 'redux'
      },
      {
        name: 'udacity',
        path: 'udacity'
      }
  ]
}

function getData (token) {
  //Each token has it's own copy of the DB. The token in this case is like an app id.
  let data = db[token]
  //This populates the default user data if there isn't any in the db.
  if (data == null) {
    data = db[token] = clone(defaultData)
  }
  return data
}

function getAll (token) {
  return new Promise((res) => {
    res(getData(token))
  })
}

module.exports = {
  getAll
}

And, I am trying to get the data from the above API with the code shown below:

readableAPI.js

const url = "http://localhost:3001/"

let token = localStorage.token
if (!token)
  token = localStorage.token = Math.random().toString(46).substr(-8)

const headers = {
  'Accept': 'application/json',
  'Authorization': token
}

export const getCategories = () =>
fetch('http://localhost:3001/categories', {headers})
  .then(res => res.json())
  .then(data => console.log(data))

Then in my React component, I am trying to get the result of the API as shown below:

import * as readableAPI from './readableAPI.js'

class App extends Component {

componentDidMount() {
  readableAPI.getCategories().then((category) => 
  category.map( value => console.log(value.name)))
}

...

}

Now the problem I am facing is: in the above code in the componentDidMount() lifecycle method,I am able to fetch the json data with the code given below:

componentDidMount() {
    readableAPI.getCategories()
}

The above code gives the array of the 3 categories:

{categories: Array(3)}
   0: {name: "react", path: "react"}
   1: {name: "redux", path: "redux"}
   2: {name: "udacity", path: "udacity"}

But, if I try to map over the array and get the individual values using the below code,I get the output as undefined.

componentDidMount() {
      readableAPI.getCategories().then((category) => 
      category.map( value => console.log(value.name)))
    }

I want to get the values of each categories so I can use the name of the category available in the server and display it in my react component.Where am I going wrong.Can anyone please guide me with this issue?

Answer 1

You are not returning anything from the fetch:

fetch('http://localhost:3001/categories', {headers})
  .then(res => res.json())
  .then(data => console.log(data)) // you should return the data (or promise) here

This is how you write the fetch (run it):

 var root = 'https://jsonplaceholder.typicode.com'; const getCategories = () => fetch(root + '/posts/1', { method: 'GET' }) .then(res => res.json()) .then(data => console.log('inside the fetch - ', data)) getCategories().then((category) => { console.log('outside the fetch - ', category); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script> 

This is the fix (run it):

 var root = 'https://jsonplaceholder.typicode.com'; const getCategories = () => fetch(root + '/posts/1', { method: 'GET' }) .then(res => res.json()) .then(data => { console.log('inside the fetch - ', data); // you must return the data! return data; }) getCategories().then((category) => { console.log('outside the fetch - ', category); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script> 

Answer 2

Are you sure you're accessing the object returned from getCategories correctly? It looks like your array is inside the categories key:

componentDidMount() {
    readableAPI.getCategories().then(result => 
    result.categories.map( category => console.log(category.name)))
}