Fetching Json Data fron an URL [The Error: data.map is not a function]

I can’t fetch Data from this Json Data: https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494

This is The Error: data.map is not a function

You Can Check the structure of The Json to understand the Problem (The Json Data is Valid) I Check it in jsonlint.com

Notice: When I try to use Json Data From jsonplaceholder.typicode.com It’s Work Fine!

THis is The Code:

import React, { useState,useEffect } from 'react';
import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal,FlatList } from 'react-native';
import { DataTable } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';

const List = () => {

  const [data, getData] = useState([])
  const URL = 'https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494';

  useEffect(() => {
  }, [])

  const fetchData = () => {
          .then((res) =>

          .then((response) => {

return (
  <SafeAreaView style={{ flex: 1}}>
    <Text>  List of Companies </Text>
    <Text>  Check Our Companies Details </Text>
  <DataTable >
  <DataTable.Header >
  {data.map((item, i) => (
    <DataTable.Row style={styles.tableRow} key={i}>
          <DataTable.Cell> {item.author} </DataTable.Cell>
          <DataTable.Cell> {item.title} </DataTable.Cell>
          <DataTable.Cell> {item.price} </DataTable.Cell>




export default List;

This is the json Data:

  "author": "Ecofence",
  "avatar": "",
  "title": "3 Wattels Set 1",
  "cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=45&key=99256f5e47a9d156b66bf6b834976bd8",
  "pagetype": "article",
  "addtext": "Ajouter",
  "businessid": "ecofence_wattel_set_1_25m",
  "link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m",
  "objectlink": "https://flow.simpas.ai/paysagiste/assetbundle/ecofence_wattel_set_1_25m",
  "description": "Ensemble de 3 wattels pour donner une dynamique à une partie de votre jardin",
  "price": "Devis gratuit",
  "liked": false,
  "drawtype": "spawn",
  "language": "fr",
  "tags": [
      "title": "Nouveau",
      "color": "pink"

>Solution :

data is not an array, but an object, you know.
map is an javascript array function.

You don’t need map anyway.

  -- {data.map((item, i) => ( // delete this line

    <DataTable.Row style={styles.tableRow} key={i}>
          <DataTable.Cell> {data.author} </DataTable.Cell>
          <DataTable.Cell> {data.title} </DataTable.Cell>
          <DataTable.Cell> {data.price} </DataTable.Cell>

  -- ))}  // delete this line

Leave a Reply