How to fetch inner API data in ReactJS?

Question

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>

        );
    }
  }
}

are u sure that fetching of localhost can be done in your case? — Alopwer
– Alopwer, Commented May 16, 2020 at 15:00

Amir-Mousavi · Accepted Answer · 2020-05-16 15:06:20Z

2

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

edited May 16, 2020 at 15:06

answered May 16, 2020 at 15:00

Amir-Mousavi

4,65315 gold badges79 silver badges135 bronze badges

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

Comments

SherylHohman · Accepted Answer · 2020-05-16 18:34:32Z

1

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>
))}

edited May 16, 2020 at 18:34

SherylHohman

18.2k18 gold badges94 silver badges100 bronze badges

answered May 16, 2020 at 15:12

Timur Rasulev

513 bronze badges

2 Comments

Amir-Mousavi Over a year ago

He has already mapping over bloglist, so bloglist[0] is nonsense

bounty Over a year ago

hey there, can you please take a look at this link? --> stackoverflow.com/questions/61908356/…

Faria Ejaz · Accepted Answer · 2020-05-18 07:43:22Z

1

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>)}

edited May 18, 2020 at 7:43

answered May 16, 2020 at 15:16

Faria Ejaz

482 silver badges8 bronze badges

2 Comments

bounty Over a year ago

this would be <h3 class="mb-2">{bloglist.blog_set.map((list)=>( list.title))}</h3> . thanks, anyways it helped!

SherylHohman Over a year ago

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation

SherylHohman · Accepted Answer · 2020-05-19 21:47:39Z

1

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>

edited May 19, 2020 at 21:47

SherylHohman

18.2k18 gold badges94 silver badges100 bronze badges

answered May 16, 2020 at 15:05

rahul sharma

565 bronze badges

3 Comments

SherylHohman Over a year ago

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation.

rahul sharma Over a year ago

@SherylHohman Thanks for the suggestion/comment, I have added description for the solution posted.

bounty Over a year ago

hey there.... please take a look at this stackoverflow.com/questions/62701259/… . Thanks!!

Collectives™ on Stack Overflow

How to fetch inner API data in ReactJS?

4 Answers 4

Comments

2 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related