CODEWITHSUNDEEP
javascriptreactjs
bounty
bounty

Reputation: 89

How to fetch inner API data in ReactJS?

What I am trying to do is fetch the inner data of blog_set. But in my case, I'm getting a null value (usually nothing is output).
Is this the correct way to get the value: {bloglist.blog_set.title} ?

api-data:

[
    {
        "url": "http://localhost:8000/api/category/brown",
        "id": 1,
        "title": "brown",
        "slug": "brown",
        "image": "http://localhost:8000/media/category/bg_1.jpg",
        "description": "",
        "created_on": "2020-05-08T15:21:02Z",
        "status": true,
        "blog_set": [
            {
                "id": 6,
                "url": "http://localhost:8000/api/blog_detail/test3",
                "title": "test3",
                "slug": "test3",
                "image": "http://localhost:8000/media/blog/author.jpg",
                "description": "test3",
                "created_on": "2020-05-13T13:36:45Z",
                "status": true,
                "category": [
                    1
                ]
            }
        ]
    }
]

./src/Category.js

export default class App extends Component{
 state = {
    bloglist: [],
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch("http://localhost:8000/api/category");
      const jsonResponse = await response.json();
      this.setState({ bloglist: jsonResponse });
    } catch (error) {
      console.log(error);
    }
  };

  render(){
        {
    const { bloglist } = this.state;

    return(
        <div>
        {bloglist.map((bloglist) => (
            <div>

                        <h3 class="mb-2">{bloglist.blog_set.title}</h3>

            </div>
            ))}
        </div>

        );
    }
  }
}

Upvotes: 0

Views: 72

Answers (4)

rahul sharma
rahul sharma

Reputation: 56

blog_set is an array. In order to iterate it, use map and {title}. In each iteration of your blog_set object, there is a key named title (destructured object). 

<div>
    {bloglist.map((bloglist) => (
        <div>   
            <h3 class="mb-2">{blog_set.map(({title})=>title))}</h3>    
        </div>
    ))}
</div>

Upvotes: 1

Faria Ejaz
Faria Ejaz

Reputation: 48

blogList.map() will iterate the parent Array of objects to get blog_set and blog_set.map() will now iterate the blog_set to get list title

 {bloglist.map((bloglist) =>(
  <div>
    <h3 class="mb-2">{bloglist.blog_set.map((list)=>( list.title)}</h3>

        </div>)}

Upvotes: 1

Timur Rasulev
Timur Rasulev

Reputation: 51

As bloglist is also an array you need to use one more .map() or as bloglist[0].blog_set[0].title

Example:

{bloglist.map((bloglist) => (
    <div>
        <h3 class="mb-2">{bloglist.blog_set.map(i=> i.title)}
        </h3>
    </div>
))}

Upvotes: 1

Amir-Mousavi
Amir-Mousavi

Reputation: 4561

blog_set is an array so it does not have an attribute/memeber/item called title. You should define at what index you want the data. 

bloglist.blog_set[0].title

Or iterate over blog_set too

Upvotes: 2

Related Questions