seo Question posted in
Some basic information to get you started with this can be found here.

How to make check in flat list if data is not coming in React Native – SEO

I am trying to perform checks if the data is not coming in the flat list form the server in my case if data is coming it is working perfectly but when there is no data it is showing error here is my code

this is my flat list now i want to perform checks on it… 

<FlatList
          data={this.state.fetchJobs}
          keyExtractor={(a, b) => b.toString()}
          renderItem={({ item }) => (
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={() =>
                this.props.navigation.navigate("DetailJobScreen", {
                  job_id: item.job_id
                })
              }
            >
              <CompleteJobLayout
                Completejobname={`${entities.decode(item.employer_name)}`}
                featuredCompleteJobColor={`${entities.decode(
                  item.featured_color
                )}`}
                imageUriCompleteJobfeatured={{ uri: `${item.featured_url}` }}
                Completejobtitle={`${entities.decode(item.project_title)}`}
                jobflagimageUri={{ uri: `${item.location.flag}` }}
                Completejoblevel={`${entities.decode(
                  item.project_level.level_title
                )}`}
                Completejobcountry={`${entities.decode(
                  item.location._country
                )}`}
                Completejobrate={`${entities.decode(item.project_cost)}`}
                fav_job_user_id={item.job_id}
                Fav_Color={`${entities.decode(item.favorit)}`}
                Completejobduration={`${entities.decode(
                  item.project_duration
                )}`}
              />
            </TouchableOpacity>
          )}
        />

here is the response when data is comming…

[
  {
    "favorit": "",
    "featured_url": "",
    "featured_color": "",
    "location": {
      "_country": "India",
      "flag": "https://amentotech.com/projects/api_workreap/wp-content/uploads/2019/03/img-03-2.png"
    },
    "job_id": 178,
    "job_link": "https://amentotech.com/projects/api_workreap/project/forest-technology-professor/",
    "_is_verified": "yes",
    "project_level": {
      "level_title": "Medium Level",
      "level_sign": 0
    },
    "project_type": "Fixed",
    "project_duration": "01 to 03 months",
    "project_cost": "&#36;6,399.00",
    "attanchents": [
      {
        "document_name": "WordPress customization",
        "file_size": "85.84 KB",
        "filetype": {
          "ext": "pdf",
          "type": "application/pdf"
        },
        "extension": "",
        "url": "https://amentotech.com/projects/worktern/wp-content/uploads/2019/03/WordPress-customization.pdf"
      },
      {
        "document_name": "How to run mysql command in database",
        "file_size": "16.06 KB",
        "filetype": {
          "ext": "docx",
          "type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        },
        "extension": "",
        "url": "https://amentotech.com/projects/worktern/wp-content/uploads/2019/03/How-to-run-mysql-command-in-database.docx"
      }
    ],
    "skills": [
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/c/",
        "skill_name": "C++"
      },
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/graphic-design/",
        "skill_name": "Graphic Design"
      },
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/html-5/",
        "skill_name": "HTML 5"
      },
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/seo/",
        "skill_name": "SEO"
      }
    ],
    "employer_name": "Steven Ford",
    "project_title": "Forest Technology Professor",
    "project_content": "Some Data"
  }]

and this is the response when there is no data available…

[
  {
    "type": "error",
    "message": "Some error occur, please try again later"
  }
]

and this is my function where i am fetching data…

 fetchCompleteJobData = async () => {
    const { params } = this.props.navigation.state;
    const response = await fetch(
      "https:...//listing/get_jobs?listing_type=company&company_id=" +
      params.employ_id
    );
    const json = await response.json();
    this.setState({ fetchJobs: json, isLoading: false });
    console.log('These are my jobs'+JSON.stringify(fetchJobs))
  };

Kindly tell me how can i make check if there is no data show no data message

Tags:

2

Answers


  1. 0 
    {
this.state.fetchJobs.length ? (
    <FlatList
        ...
    />
) : (
    <View>
        ...
    </View>
)
}
    Login or Signup to reply.
  2. 0

    You can check if response is of type error and set an empty array in your component’s state.

    fetchCompleteJobData = async () => {
  //... your code to fetch data

  const json = await response.json();
  if(Array.isArray(json) && json[0] && json[0].type && json[0].type === 'error') {
    this.setState({ fetchJobs:[], isLoading: false }); // empty data set 
  } else {
    this.setState({ fetchJobs: json, isLoading: false });
  }
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search