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, May 16 '20 at 15:00

Amir-Mousavi · Answer 1 · 2020-05-16T15:06:20.923

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 '20 at 15:06

answered May 16 '20 at 15:00

Amir-Mousavi

4,273
12
70
123

score 1 · Answer 2 · edited May 19 '20 at 21:47

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 '20 at 21:47

SherylHohman

16,580
17
88
94

answered May 16 '20 at 15:05

rahul sharma

56
5

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 May 16 '20 at 18:22
1

@SherylHohman Thanks for the suggestion/comment, I have added description for the solution posted. – rahul sharma May 17 '20 at 05:40
hey there.... please take a look at this https://stackoverflow.com/questions/62701259/how-to-use-search-effect-in-reactjs . Thanks!! – bounty Jul 03 '20 at 03:35

score 1 · Accepted Answer · edited May 16 '20 at 18:34

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 '20 at 18:34

SherylHohman

16,580
17
88
94

answered May 16 '20 at 15:12

Timur Rasulev

51
3

He has already mapping over bloglist, so `bloglist[0]` is nonsense – Amir-Mousavi May 16 '20 at 15:13
hey there, can you please take a look at this link? --> https://stackoverflow.com/questions/61908356/how-to-redirect-to-a-page-after-successful-login-in-reactjs – bounty May 20 '20 at 09:07

Faria · Answer 4 · 2020-05-18T07:43:22.287

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 '20 at 07:43

answered May 16 '20 at 15:16

Faria

48
2
8

this would be `
{bloglist.blog_set.map((list)=>( list.title))}
` . thanks, anyways it helped! – bounty May 16 '20 at 15:27
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 May 16 '20 at 18:38

How to fetch inner API data in ReactJS?

4 Answers4

{bloglist.blog_set.map((list)=>( list.title))}