Я пытаюсь извлечь данные из API веб-сайтов в мое приложение для ответов / листовок.Пока у меня есть данные, возвращаемые в консоли:
fetch('https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50')
.then(res => res.json())
.then(members => {
console.log(members);
this.setState({
Nearbymems : members.Nearbymems
});
});
Затем я пытаюсь отобразить элементы в качестве маркеров на моей карте, используя следующее:
{this.state.NearbyMems.map(members => (
<Marker
position={[members.location.latitude, members.location.longitude]}
icon={myIcon3} >
<Popup>
<em>{members.name}, </em>
{members.bio} {'\n'}
<PopupModal initialModalState={true}/>
</Popup>
</Marker>
))}
Пока это не приводит кошибки и мое приложение компилируется и работает без ошибок, маркеры не отображаются.Это пример того, как отображаются возвращаемые данные JSON:
{
"latlon": "53,-6",
"radius": "1000",
"format": "json",
"perpage": "50",
"pages": 108,
"page": 1,
"total": 5391,
"members": [
{
"id": 85639,
"name": "____",
"url": "https://thesession.org/members/85639",
"location": {
"latitude": "____",
"longitude": "_____"
},
"date": "",
"bio": ""
},
edit:
Код для myIcon3:
var myIcon3 = L.icon({
iconUrl: 'http://www.libpng.org/pub/png/img_png/pengbrew_160x160.png',
iconSize: [25, 51],
iconAnchor: [12.5, 51],
popupAnchor: [0, -51],
});
вывод fetch:
Object
format: "json"
latlon: "53,-6"
members: (50) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
{…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
page: 1
pages: 108
perpage: "50"
radius: "1000"
total : 5391
__proto__: Object