score:1
following from your actual code, make the following change
getbusstops = () => {
try {
axios.get(`http://transportapi.com/v3/uk/places.json?lat=${this.state.latitude}&lon=${this.state.longitude}&type=bus_stop&app_id=xxxx&app_key=xxxxxxxx`)
.then(response => {
this.setstate({ markers: response.data.member});
console.log(this.state.markers);
})
.catch(error => {
console.log('error fetching and parsing data', error);
});
} catch (error) {
console.log(error);
}
}
score:0
this.state.markers.map is not a function
means that you are trying to use map
function on a non array variable which is this.state.markers
in this case.
i think that this.state.markers
is undefined
when react native component
first renders otherwise double check if this.state.markers
is an array
not an object
.
you could also do a check before rendering in case of undefined
.
this.state.markers && this.state.markers.map(marker => (
<marker
coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
/>
))}
score:0
ive experienced the same road block try assigning this.state to const then use the return() statement to stop the execution of a function and return the value of the expression.
// see the example below.
render() {
const { markers } = this.state;
return (
<view style={styles.container}>
<mapview
style={styles.map}
showsuserlocation={true}
initialregion={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudedelta: 0.0462,
longitudedelta: 0.0261,
}}
>
{markers.map((marker, index ) => {
return (
<marker
coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
/>
)
))}
</mapview>
);
}
}
additionally for your reference, here is a source code of a working example attached with a screenshot of how the markers are spread out. in this case it's a custom marker which renders item.price from the json.
the format of the json coordinates are as such: "geopoints: "55.263237,25.009765","
therefore i have written a separate function to make it compatible.
however you can leverage the format most compatible with your data structure.
componentdidmount() {
return fetch("www.yoururlgoeshere.com/json", { cache: "reload" })
.then((response) => response.json())
.then((responsejson) => {
const maparray = responsejson.properties.filter((item) => {
if (typeof(item.photo) !== 'undefined' && item.photo.length)
return item.property_type && item.property_type.touppercase();
});
this.setstate({
isloading: false,
datasource: maparray
});
})
.catch((error) => {
console.error(error);
});
}
render() {
const { navigation } = this.props;
const { datasource } = this.state;
return (
<view style={styles.container}>
<mapview initialregion={{
latitude: 25.2048,
longitude: 55.2708,
latitudedelta: 0.122,
longitudedelta: 0.121
}} style={styles.map}>
{datasource.map((item, index) => {
return (
<marker
key={`marker-${item.listing_ref}`}
coordinate = {{
latitude : item.geopoints.split(",")[1] - 0,
longitude : item.geopoints.split(",")[0] - 0,
}}
>
<view
style={[
styles.marker,
styles.shadow,
]}
>
<text style={{margintop: 10, marginbottom: 10,fontsize : 8, fontweight:"bold", color : "black"}}>د.إ {numeral(item.price).format('0.0a')}</text>
</view>
</marker>
);
})}
</mapview>
</view>
);
}
}
Source: stackoverflow.com
Related Query
- How do I diplay Json markers on react native maps?
- How to show markers on map fetching data from a JSON file on React Native
- How to parse json data in react native
- react native how to filter data with some key object on json
- How to add map markers stored in a JSON feed to an existing React Google Map?
- How to load google maps markers in a React Component
- How to use onPress in component React Native Maps
- I do not know how to store json data from an api call within a nodejs express server, and send it to a react native client
- React native How to get only one part of my JSON back to Axios API
- How to drag point on maps when scroll the map in react native
- how to pick an object from json string based on a condition in react native
- How to disable source maps for React JS Application
- How to detect when a React Native app is closed (not suspended)?
- How do I exit/shut down a React Native app?
- How do you make the ListHeaderComponent of a React Native FlatList sticky?
- How to concatenate JSX components in React Native
- How to add sourcemap in React Native for Production?
- How to test React Native Module?
- How can I parse through local JSON file in React js?
- How to implement radio button in React Native
- How to adjust font size to fit view in React Native for Android?
- How to change background color of react native button
- React Native - how to use local SVG file (and color it)
- How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
- react native how to call multiple functions when onPress is clicked
- How to dim a background in react native modal?
- How to create two columns with space beetwen in react native - flatList
- How to keep scroll position using flatlist when navigating back in react native ?
- How can I present a native UIViewController in React Native? (Can't use just a UIView)
- How to close the modal in react native
More Query from same tag
- React + Firebase v3 - how to get a 2nd reference to firebase to update a single item
- How to resize card content to its size in material ui?
- React functional component popups based on each id click on edit
- Promise.all raises TypeError: undefined is not a function
- How to update an array in an object in Javascript
- How to reduce bundle size of the webpack build for a react application?
- What is the best location to store the API Root Url in React JS?
- Firebase Firestore data loads in, but disappears shortly after it has appeared when rendering in react.js
- Use custom filter input component with Griddle
- Getting "500 Internal Server Error" while posting a request to the MongoDB using Mongoose transaction
- Can’t read siteMetadata object from gatsby-config.js file with Gatsby and Typescript
- Google Maps JavaScript API library must be loaded - convert solution for react functional component
- issues with having setState in useEffect causing delayed state change
- error "Converting circular structure to JSON -> starting at object with constructor 'FiberNode'" in react native
- Can log in user on Postman, but not on browser
- Error dynamically updating an array list in ReactJs
- If React props are readonly, how they can change (whats the usage of getDerivedStateFromProps)?
- how to handle the method type in ListItem of type button in react-admin?
- TypeError: Cannot read property 'map' of undefined when I am trying to access API call data
- Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'
- configuration.module has an unknown property 'loaders'
- React Draft Wysiwyg apply bold, italic or udenderlina to whole content
- How to configure webpack to load glyphicons/font-awesome icons in React
- Looping through nested data and displaying object properties and values
- react redux using useSelector multiple times in app
- How use dynamic variable in react-axios?
- throttle from lodash in react not working
- why is my state not updated in useEffect?
- Rollup plugin postcss does not inject css imported from node_modules
- Can I fetch api every time that props change on ComponentDidUpdate?