У меня есть URL со строкой, которую я хочу использовать JSON.parse (я новичок в React native).
вот часть URL со строкой -
<string>[{"Song_ID":"11","Song_Name":"The Doors - People","Song_File":"http://myurl.com/songs/The_Doors_People.mp3","Image":"http://myurl.com/images/The_Doors.jpg"},{"Song_ID":"12","Song_Name":"Smashing Pumpkins - Porcelina","Song_File":"http://myurl.com/songs/Smashing_Pumpkins_Porcelina.mp3","Image":"http://myurl.com/images/Mellon_Collie.jpg"},]</string>
Вот код, я считаю, что выборка имеет проблему. dataSource: JSON.parse(responseJson)
не выполняет эту работу.
const URL =
"http://mobile.domain.com/site/WebService.asmx/SongsList";
export default class FetchExample extends React.Component {
static navigationOptions = {
title: "Json Data"
};
constructor(props) {
super(props);
this.state = { isLoading: true };
}
componentDidMount() {
return fetch(URL)
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: JSON.parse(responseJson) // doesn't work
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
Я попробовал dataSource: JSON.stringify(responseJson)
но он тоже не выполняет эту работу. Код рендеринга - (надеюсь, что эта часть в порядке - data={this.state.dataSource}
)
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.Song_ID}, {item.Song_Name}</Text>}
keyExtractor={({id}, index) => id} // this part with the "id" and "index" I dont understand (the index in my code is fade)
/>
</View>
);
}
}
он показывает мне ошибку: "Ошибка JSON Parse: нераспознанный токен" <".
он показывает мне ошибку: "Ошибка JSON Parse: нераспознанный токен" <".
Это означает, что вы пытаетесь разобрать, не JSON. Поэтому вы хотите использовать вкладку "Сеть браузера", чтобы узнать, что это такое.
Если это действительно то, что у вас есть в вашем вопросе:
[{"Song_ID":"11","Song_Name":"The Doors - People","Song_File":"http://myurl.com/songs/The_Doors_People.mp3","Image":"http://myurl.com/images/The_Doors.jpg"},{"Song_ID":"12","Song_Name":"Smashing Pumpkins - Porcelina","Song_File":"http://myurl.com/songs/Smashing_Pumpkins_Porcelina.mp3","Image":"http://myurl.com/images/Mellon_Collie.jpg"},]
Тогда есть две проблемы:
<string>
в начале и </string>
в конце (и это соответствует вашему сообщению об ошибке), и
В JSON вы не можете иметь запятую в массиве.
Здесь правильная версия JSON:
[{"Song_ID":"11","Song_Name":"The Doors - People","Song_File":"http://myurl.com/songs/The_Doors_People.mp3","Image":"http://myurl.com/images/The_Doors.jpg"},{"Song_ID":"12","Song_Name":"Smashing Pumpkins - Porcelina","Song_File":"http://myurl.com/songs/Smashing_Pumpkins_Porcelina.mp3","Image":"http://myurl.com/images/Mellon_Collie.jpg"}]
Другая возможность заключается в том, что вы не получаете JSON, который, по вашему мнению, вы вообще, и вместо этого это сообщение об ошибке с сервера как HTML (с учетом того, что <
символ). (HTML-код может сообщать об ошибке, см. № 4 ниже).
Но у вас есть еще две проблемы:
Вы пытаетесь выполнить двойной анализ JSON:
componentDidMount() {
return fetch(URL)
.then(response => response.json()) // <=== Parses the JSON
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: JSON.parse(responseJson) // <=== Tries to parse it again
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
Только разобрать его один раз.
Ваш код должен проверить response.ok
. Вы не одиноки в том, чтобы пропустить эту проверку, так распространено, что люди пропустили ее, что я написал ее в своем анемичном маленьком блоге.
Итак (см. ***
комментарии):
componentDidMount() {
return fetch(URL)
.then(response => {
if (!response.ok) { // *** Check errors
throw new Error( // ***
"HTTP status " + response.status // ***
); // ***
} // ***
return response.json(); // *** Parse the JSON (once)
})
.then(dataSource => { // *** More accurate name
this.setState(
{
isLoading: false,
dataSource // *** Use the parsed data
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
В комментарии вы сказали:
Я не могу удалить тег, он исходит из С# url WebService.asmx
Вы должны исправить это в WebService.asmx. ASP.net абсолютно может создать действительный JSON. В противном случае вы не можете напрямую проанализировать его как JSON.
Но - и я не рекомендую это - если это абсолютно необходимо, вы можете предварительно обработать строку, чтобы разобраться с двумя проблемами, которые я указал с ней:
componentDidMount() {
return fetch(URL)
.then(response => {
if (!response.ok) { // *** Check errors
throw new Error( // ***
"HTTP status " + response.status // ***
); // ***
} // ***
return response.text(); // *** Read the TEXT of the response
})
.then(dataSourceText => { // *** More accurate name
// *** Remove the invalid parts and parse it
const dataSource = JSON.parse(
dataSourceText.match(/^<string>(.*),]<\/string>$/)[1] + "]"
);
this.setState(
{
isLoading: false,
dataSource // *** Use the parsed data
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
)
. Я исправил это. (Я также расширил начало ответа.) Но дело не в том, чтобы копировать и вставлять код из ответов, надеясь, что он будет работать. Суть в том, чтобы понять, что делает код и почему, и применить эти уроки к своему коду.
Кажется, проблема заключается в том, что ответ содержит тег <string></string>
. Я думаю, что если у удалить, то сначала должен работать.
Как в этом вопросе.
JSON.parse