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

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(() => {
      fetchData()
  }, [])


  const fetchData = () => {
      fetch(URL)
          .then((res) =>
              res.json())

          .then((response) => {
              console.log(response);
              getData(response);
          })
  }



return (
  <SafeAreaView style={{ flex: 1}}>
  <ScrollView>
    <Text>  List of Companies </Text>
    <Text>  Check Our Companies Details </Text>
  <DataTable >
  <DataTable.Header >
    <DataTable.Title>author</DataTable.Title>
    <DataTable.Title>Title</DataTable.Title>
    <DataTable.Title>Price</DataTable.Title>
  </DataTable.Header>
  </DataTable>
  {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>
      </DataTable.Row>

                ))}

  </ScrollView>
  </SafeAreaView>

);
};

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"
    }
  ]
}

CodePudding user response：

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>
      </DataTable.Row>

  -- ))}  // delete this line