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/hortus/paysagiste/category?businessid=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>Businessid</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.businessid} </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:
{
"articles": [
{
"title": "3 Wattels Set 1",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=45&key=99256f5e47a9d156b66bf6b834976bd8",
"businessid": "ecofence_wattel_set_1_25m",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494",
"description": "Ensemble de 3 wattels pour donner une dynamique à une partie de votre jardin",
"price": "En savoir plus",
"liked": false
},
{
"title": "Arrondis 4m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=25&key=feb67f749e357b59b31fdb462649c1e4",
"businessid": "ecofence_wattel_rounded",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_rounded&companynumber=0899607494",
"description": "Plessage arrondis de 4m x 1,8m\nIdéal pour cacher un élément du jardin comme une citerne, ...\n\nàpd de 990 eur htva.\nDemandez un devis",
"price": "En savoir plus",
"liked": false
},
{
"title": "Cercle 3m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=32&key=653f67b47060f689c7a0419293c7136",
"businessid": "ecofence_wattel_circle_3m",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_circle_3m&companynumber=0899607494",
"description": "Idéal pour créer un espace intime dans le jardin.",
"price": "En savoir plus",
"liked": false
},
{
"title": "Clôture de wattel",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=56&key=f889b376baefc42e244d464eef017f0",
"businessid": "fence_wattel-_lenghtways_3_13_fromto_FROMTO",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=fence_wattel-_lenghtways_3_13_fromto_FROMTO&companynumber=0899607494",
"description": "Placez un premier point, puis un second pour dessiner un wattel de la longueur que vous souhaitez. \nEnsuite, choisssez la hauteur avec le curseur.",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 3x1,3m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=33&key=d3c3b8dc7d30f186663491bb6994dfb",
"businessid": "ecofence_wattel_lenghtways_3_13",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_3_13&companynumber=0899607494",
"description": "Idéal pour faire une séparation tout en gardant une visibilité",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 3x1,8m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=38&key=e34d959d09d6a6961894ed5531b49",
"businessid": "ecofence_wattel_lenghtways_3_18",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_3_18&companynumber=0899607494",
"description": "Cacher la vue à la hauteur légale",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 4x1,8m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=44&key=4464f92e9f95cb17380a7439b482e11",
"businessid": "fence_wattel_lenghtways_4_18",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=fence_wattel_lenghtways_4_18&companynumber=0899607494",
"description": "Créer des séparations d'espace avec ce module de 4m de long",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 4x3m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=41&key=8acc7ab98c49d437a4d818e94342b25a",
"businessid": "ecofence_wattel_lenghtways_4_3",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_4_3&companynumber=0899607494",
"description": "Créer un mur complet",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 5x1,8m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=50&key=c0b6538277395083e248322834a114f9",
"businessid": "ecofence_wattel_lenghtways_5_18",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_5_18&companynumber=0899607494",
"description": "",
"price": "En savoir plus",
"liked": false
}
],
"title": "Plessage artisanal",
"businessid": "0899607494",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=28&key=1025e35dcbdf9da271a91f4785869b",
"pagetype": "category",
"author": "Ecofence",
"subtitle": "coucou",
"moreinfotext": "Plus ...",
"language": "fr"
}
CodePudding user response：
The problem is that the JSON structure is only an array when accessed through the articles property, and accordingly with your code you're doing
getData(response);
but response at this point is an "object" and therefore has no .map on its prototype.
what you can do to easily overcome this is:
getData(response.articles);
Also, another point that could be an improvement is to rename the getData to setData which is more appropriate with what is really happening.
CodePudding user response：
Use optional chaining:
{data?.articles.map((item, i) => (
because you try to map before data is fetched. Or you can use conditional rendering:
{data && data.articles.map((item, i) => (
CodePudding user response：
In your useState, you assume data is an object array. but you are setting an object instead of object array.
check the response contains the articles attribute and then set it to the useState. otherwise, set it as an empty array. then the issue should be resolved.
recommend using typescript with type checking so you can avoid such issues.
CodePudding user response：
I am using axios, so far no problem:
To install: npm i axios
Code usage, refer to https://www.npmjs.com/package/axios