1

I'm trying to fetch specific data from a API, something like that: I have that JSON after response:

{
    "id": 5,
    "url": "http://127.0.0.1:8000/api/article/5/",
    "title": "Obama Offers Hopeful Vision While Nothing Nation's Fears",
    "description": "Obama Offers Hopeful Vision While Nothing Nation's Fears",
    "category": [
        "http://127.0.0.1:8000/api/category/1/"
    ],
    "image": "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"
},
{
    "id": 6,
    "url": "http://127.0.0.1:8000/api/article/6/",
    "title": "NASA Formalizes Efforts To Protect Earth From Asteroids",
    "description": "Last week, NASA annouced a new program called the Planetary Defense Coordination Office (PDCO) which will coordinate NASA's efforts for detecting and tracking near-Earth objects (NEOs), If a large object comes hurting toward our planet...",
    "category": [
        "http://127.0.0.1:8000/api/category/4/"
    ],
    "image": "http://127.0.0.1:8000/media/article_image/news_03_EOUms51.jpg"
},
{
    "id": 7,
    "url": "http://127.0.0.1:8000/api/article/7/",
    "title": "Didi Kuaidi, The Company Beating Uber In China, Opens Its API To Third Party Apps",
    "description": "One day after Uber updated its API to add 'content experiences' for passengers, the U.S company's biggest rival - Didi Kuadii in China - has opened its own platform up by releasing an SDK for developoers and third-parties",
    "category": [
        "http://127.0.0.1:8000/api/category/3/"
    ],
    "image": "http://127.0.0.1:8000/media/article_image/news_02_l5zY4HJ.jpg"
}

And in that API, i have a child called by Category:

 {
    "id": 1,
    "url": "http://127.0.0.1:8000/api/category/1/",
    "name": "POLITICS"
},
{
    "id": 2,
    "url": "http://127.0.0.1:8000/api/category/2/",
    "name": "BUSINESS"
},
{
    "id": 3,
    "url": "http://127.0.0.1:8000/api/category/3/",
    "name": "TECH"
},
{
    "id": 4,
    "url": "http://127.0.0.1:8000/api/category/4/",
    "name": "SCIENCE"
},
{
    "id": 5,
    "url": "http://127.0.0.1:8000/api/category/5/",
    "name": "SPORTS"
}

What i want to do is to render my articles with the POLITICS category, but I'dont know how to do that, Here is what I've done so far.

Method to fetch json:

getItems() {
    this.setState({ 'isLoading': true });

    fetch('http://127.0.0.1:8000/api/article/')
        .then(results => {
            if (results.ok) {
                return results.json();
            } else {
                throw new Error('Something went wrong ...');
            }
        })
        .then(results => this.setState({ 'items': results, 'isLoading': false }))
        .catch(error => this.setState({ error, isLoading: false }));
}

My render method:

render() {
    const { isLoading, error } = this.state;

    if (error) {
        return <p>{error.message}</p>;
    }

    if (isLoading) {
        return <p>Loading ...</p>;
    }
    return (
        <ul>
            {this.state.items.map(function (item, index) {
                console.log(item.category.indexOf("1") != 01)
                if (item.category === 1){
                    return <ContentItem item={item} key={index} />
                }
            })}
        </ul>
    );
}

EDIT: Output from console.log(item) in render:

{id: 5, title: "Obama Offers Hopeful Vision While Nothing Nation's Fears", description: "Obama Offers Hopeful Vision While Nothing Nation's Fears", category: Array(1), image: "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"}
category: Array(1)
    0: 1
    length: 1
    __proto__: Array(0)
description: "Obama Offers Hopeful Vision While Nothing Nation's Fears"
id: 5
image: "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"
title: "Obama Offers Hopeful Vision While Nothing Nation's Fears"
__proto__: Object
1
  • What is the current output rendered? Commented Oct 21, 2018 at 22:20

1 Answer 1

2

What you are NOT doing, is filtering by id,

if (item.category === 1){ //You need to add .id here
    return <ContentItem item={item} key={index} />
}

like so:

if (item.category.id === 1){ //.id
    return <ContentItem item={item} key={index} />
}

What you are doing wrong is that you are checking the whole object against the === 1 condition instead of just the property id of the object.

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

4 Comments

I don't know why, but when i put that validation item.category.id comes like undefined
Can you do a console.log(results) inside the fetching function getItems() and paste in an "EDIT:" the output?
Sure, I'm going to do that!!
I see a problem, my json, in category returns a array, with multiple categories, because a article can have more than one categorie

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.