I am having trouble trying the parse this JSON data. I can fix this error by limiting my data to just one like this: {"id": "13", "imagename": "hello"}, but this is my whole data:
{"id":"1","imagename":"dog"}{"id":"2","imagename":"cat"}{"id":"3","imagename":"mouse"}{"id":"4","imagename":"deer"}{"id":"5","imagename":"shark"}{"id":"6","imagename":"ant"}
I think React Native cannot handle no more than one data in <Text>?
export default class HomeScreen extends React.PureComponent {
constructor(props)
{
super(props);
this.state = {
isLoading: true,
};
componentDidMount(){
fetch(`http://www.example.com/React/data.php`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then((response) => response.json())
.then((responseJson) => {
data = responseJson;
this.setState({ loading: false });
}).catch((error) => {
console.warn(error);
});
}
renderItems() {
const items = [];
this.data.foreach( ( dataItem ) => {
items.put( <Text>{ dataItem.id }</Text> );
} )
return items;
} <--- This is an attempt to try to put them in an object and then display the data, but I keep getting undefined.
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return(
<View style = { styles.MainContainer }>
<View>
<Card>
<View>
<Text>{this.data.id}</Text>
<Text>{this.data.imagename}</Text>
</View>
</Card>
</View>
</View>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333',
},
}
I also looked up other parse error questions, but our code is very different. Like I said before, this code works if the data is limited to one. I can't figure out why it does not allow more than one data to be displayed.
EDIT: When I changed my response.json to text, I got no results so that could be a reason. When I changed <Text>{this.data.id}</Text> to just this.data, I can see all of the data. How do I get just the id from that data?
You can write the JSON as the notation of an object, containing an array, containing objects:
'{"images" : [{"id":"1", "imagename":"dog"},{"id":"2", "imagename":"cat"},{"id":"3", "imagename":"mouse"},{"id":"4", "imagename":"deer"},{"id":"5", "imagename":"shark"},{"id":"6", "imagename":"ant"}]}'
Related
I'm new to react native, so please be kind! I am trying to populate a Flatlist using a JSON.
Below is my JSON data
{
"h1":{
"baseprice":899,
"description":"Upto Waist length Hair",
"imageUrl":"https://i.imgur.com/0IgYzAv.jpg'",
"price":799,
"time":"25 min",
"title":"Nourishing Hair Spa",
"type":"Service"
},
"h2":{
"baseprice":899,
"description":"Touch Up of length less than 4 inches",
"imageUrl":"https://i.imgur.com/q7ts4PZ.jpg",
"price":799,
"time":"45 min",
"title":"INOA Root Touch Up",
"type":"Service"
}
}
Here is the code that I used to push the JSON data in to my Flatlist
export default class Office extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
};
}
componentDidMount() {
return fetch("https://stylmate1.firebaseio.com/hair.json")
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
});
console.log(dataSource);
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={(item) => <Text>{item.title}</Text>}
/>
</View>
);
}
}
As soon as I refresh the App I get an error
Can't find variable : dataSource
But if I console.log(responseJson); then I get the complete JSON object.
I don't know what am I doing wrong here. Please help me in fixing this.
Your FlatList is supposed to look like this:
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item[1].title}</Text>}
/>
</View>
);
You have to destructure the item in order to use it.
Output:
Working Example code:
import React, { useState, useEffect } from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
export default function App() {
const [dataSource, setData] = useState([]);
useEffect(() => {
fetch('https://stylmate1.firebaseio.com/hair.json')
.then((response) => response.json())
.then((responseJson) => {
setData(responseJson);
console.log(responseJson);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
<View style={styles.container}>
{dataSource ? (
<FlatList
data={Object.entries(dataSource)}
renderItem={({ item }) => (
<View style={{ padding: 10 }}>
<Card>
<Text style={styles.paragraph}>{item[1].title}</Text>
</Card>
</View>
)}
/>
) : null}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Expo Snack Live Demo
The Error happens because you are trying to log dataSource which is wrong it should be this.state.dataSource.
console.log(dataSource);
change it to
console.log(this.state.dataSource);
in your .then() block
firstly,
console.log(dataSource);
should change to
console.log(this.state.dataSource);
However, you may not get the correct console.log since set state is async. You get better and accurate answer with responseJson
Secondly, flatList requires an array of objects structure, you need to convert them using the following methods. I moved your "h1", and "h2" into the object and label them as key.
const original = {
"h1":{
"baseprice":899,
"description":"Upto Waist length Hair",
"imageUrl":"https://i.imgur.com/0IgYzAv.jpg'",
"price":799,
"time":"25 min",
"title":"Nourishing Hair Spa",
"type":"Service"
},
"h2":{
"baseprice":899,
"description":"Touch Up of length less than 4 inches",
"imageUrl":"https://i.imgur.com/q7ts4PZ.jpg",
"price":799,
"time":"45 min",
"title":"INOA Root Touch Up",
"type":"Service"
}
}
const newArray = Object.keys(original).map( key => ({...original[key], key }))
console.log(newArray)
I have problem when fetching data in react-native. I'm trying to send parts of my state in body of POST. I dont understand where is cyclic structure in my code. I dont see any cyclic structures.
I know the error is caused by state because when i simply put some strings in body everything is going alright.
import React from 'react';
import {Text, View, Button, StyleSheet, TextInput, TouchableOpacity} from "react-native";
export default class AddKidScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
age: '',
parentID: props.navigation.getParam('myID', 0)
}
}
handleAddKid() {
let url = "https://piotr2.scementowani.pl/apiPiotr";
let name = this.state.name;
let age = this.state.age;
fetch(url, {
method: 'POST',
headers: {
'Content-Type': "application/json",
},
body: JSON.stringify({
method: "addKid",
name: name,
age: age,
}),
})
.then(response => response.json())
.then(responseJson => {
this.props.navigation.navigate('Main');
})
.catch((error) => {
console.error(error);
});
}
updateValue(text,field) {
if (field == 'name') {
this.setState({
name: text,
})
} else if (field == 'age' ){
this.setState( {
age: text,
})
}
}
render() {
return(
<View>
<View style={{flexDirection: 'row', width: '100%'}}>
<Text>
Imię:
</Text>
<TextInput
placeholder = "Imię"
onChange = {(text) => this.updateValue(text,'name')}
/>
</View>
<View style={{flexDirection: 'row', width: '100%'}}>
<Text>
Wiek:
</Text>
<TextInput
placeholder = "Wiek"
onChange = {(text) => this.updateValue(text,'age')}
/>
</View>
<TouchableOpacity onPress={this.handleAddKid.bind(this)}>
<Text>DODAJ</Text>
</TouchableOpacity>
</View>
)
}
}
When running handleAddKid()
I get JSON.stringify cannot serialize cyclic structure.
So I'm trying to make a simple application with expo and expo audio that will generate a list of audio buttons and text. But I cannot figure out how react works regarding redrawing the setState OUTSIDE componentWillMount and how to remake a soundobject with a new URI
So right now it will work but only playing the FIRST uri, I assume this is because the object still exists.
And it will not change the state of the button, I know this is because react cant see its changing for some reason from FlatList
It works outside of it, if I only make one button in renders view.
FlatList will render the setStates if I use LegacyImplementation=true .. But Im warned this is deprecated. And it renders it for all buttons at the same time
This is my handlerClass:
export class TSSGetter extends React.Component {
constructor(props){
super(props);
this.state ={
isLoading: true,
playingStatus: "Play"
}
}
retrieveData() {
const endpoint = 'http://127.0.0.1:3333/get'
const data = {
"userId": "123412341234",
"hmac": "detteerikkeenrigtighmac"
}
return new Promise((resolve, reject) => {
fetch(endpoint, {
method: 'POST',
headers: {
'Accept': 'application/json',
'content-type':'application/json'
},
body: JSON.stringify(data)
})
.then((resp) => {
console.log('hej return')
return resp.json();
})
.then((resp) => {
resolve(resp);
console.log('resp')
}).catch(function(error) {
console.log(error,'naeh')
});
});
}
componentDidMount(){
this.retrieveData()
.then((resp) => {
var pages = resp.books.contentObjects
pages.map((userData) => {
console.log('superduper pages', userData.contentObjectId)
})
this.setState({
isLoading: false,
dataSource: resp.books.contentObjects,
dataroot: resp.books
});
}).catch((err) => {
//handle error
console.log("Api call error2");
alert(err);
})
}
async _playRecording(AudioURL) {
console.log(AudioURL)
const { sound } = await Audio.Sound.createAsync(
{uri: AudioURL},
{
shouldPlay: true,
isLooping: true,
},
this._updateScreenForSoundStatus,
);
this.sound = sound;
this.setState({
playingStatus: 'playing'
});
}
_updateScreenForSoundStatus = (status) => {
if (status.isPlaying && this.state.playingStatus !== "playing") {
this.setState({ playingStatus: "playing" });
} else if (!status.isPlaying && this.state.playingStatus === "playing") {
this.setState({ playingStatus: "donepause" });
}
};
async _pauseAndPlayRecording() {
if (this.sound != null) {
if (this.state.playingStatus == 'playing') {
console.log('pausing...');
await this.sound.pauseAsync();
console.log('paused!');
this.setState({
playingStatus: 'donepause',
});
} else {
console.log('playing...');
await this.sound.playAsync();
console.log('playing!');
this.setState({
playingStatus: 'playing',
});
}
}
}
_syncPauseAndPlayRecording() {
if (this.sound != null) {
if (this.state.playingStatus == 'playing') {
this.sound.pauseAsync();
} else {
this.sound.playAsync();
}
}
}
_playAndPause = (AudioURL) => {
console.log(AudioURL)
switch (this.state.playingStatus) {
case 'Play':
this._playRecording(AudioURL);
break;
case 'donepause':
case 'playing':
this._pauseAndPlayRecording();
break;
}
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
const styling = {
flex: 1,
paddingTop:10
// flexDirection: 'row'
}
const data = this.state.dataroot;
return(
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =>
<View>
<TouchableOpacity style={styles.button} onPress={() => this._playAndPause(item.AudioURL)}>
<Text style={styles.buttonText}>
{this.state.playingStatus}+ {item.contentObjectId}
</Text>
</TouchableOpacity>
<Text style={styles.description}>
{item.text},
</Text>
</View>
}
keyExtractor={(item, index) => item.contentObjectId}
/>
</View>
);
}
}
UPDATE: setting extraData={this.state} in flatlist updates the button.. But all the buttons. How do I change the scope of the button?
You could create a specific component for the items in the FlatList. Each of the items will then have their own state.
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native-gesture-handler";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item, index) => index.toString()}
data={[1, 2, 3, 4, 5]}
renderItem={({ item }) => <Sound />}
/>
</View>
);
}
}
class Sound extends Component {
constructor() {
super();
this.state = {
status: "IDLE"
};
}
onChangeState = value => {
this.setState({
status: value
});
};
render() {
const { status } = this.state;
return (
<View style={{width: 200,paddingVertical: 10}}>
<Text>Status: {status}</Text>
<View style={{ flex: 1,flexDirection: "row", justifyContent: "space-between" }}>
<Text onPress={() => this.onChangeState("PLAYING")}>PLAY</Text>
<Text onPress={() => this.onChangeState("STOPPED")}>STOP</Text>
<Text onPress={() => this.onChangeState("PAUSED")}>PAUSE</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 100,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
I checked out in the docs, here, and I saw that it will re-render just if you pass the state prop, see this explanations:
By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.
can someone please help me debug this code, I'd like to use 'react-native-autocomplete-input' library to autocomplete a search text input, basically the api request return a list of stock symbols and company names and I'm thinking to store this file locally to make it faster, for right now I just want to make it work using fetch. The autocomplete must search in responseJson.symbol
Here's what I've done so far:
import Autocomplete from 'react-native-autocomplete-input';
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Platform,
ScrollView, View, ActivityIndicator,
} from 'react-native';
class AutocompleteExample extends Component {
constructor(props) {
super(props);
this.state = {
symbols: [],
query: '',
};
}
searchSymbol(query) {
if (query === '') {
return [];
}
const { symbols } = this.state;
const url = `https://api.iextrading.com/1.0/ref-data/symbols`;
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
symbols:responseJson.symbol,
});
})
.catch((error) => {
console.error(error);
});
return symbols;
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
const { query } = this.state;
const symbols = this.searchSymbol(query);
return (
<ScrollView>
<View style={styles.MainContainer}>
<Text style={{fontSize: 12,marginBottom:10}}> Type your favorite stock</Text>
<Autocomplete
autoCapitalize={true}
containerStyle={styles.autocompleteContainer}
data={symbols}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Enter symbol"
renderItem={({ symbol }) => (
<TouchableOpacity onPress={() => this.setState({ query: symbol })}>
<Text style={styles.itemText}>
{symbol}
</Text>
</TouchableOpacity>
)}
/>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: 'center',
flex:1,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
autocompleteContainer: {
borderWidth: 1,
zIndex:999,
borderColor: '#87ceeb',
},
itemText: {
fontSize: 17,
color:'#000000',
}
});
module.exports = AutocompleteExample
I don't see any error on the console and the api request is working correctly, I just can't access symbols const Do I have to render something like cloneWithRows(responseJson.symbols) ? Thanks
First of all, the searchSymbol method should be either binded in the component constructor, or declared as a class property. Otherwise, "this" will not point to the component instance.
Then, it seems that your state does not have an isLoading property, but you use it in your render function.
What you should probably do is call your asynchronous searchSymbol method in the componentDidMount lifecycle method. When the promise of the fetch resolves, you should put the result in the state as well as put the isLoading boolean to false. Then your component will re-render with the now available data.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, {
Component,
} from 'react';
import {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
} from 'react-native';
var REQUEST_URL = 'https://api.themoviedb.org/3/movie/popular?api_key=a667a62ffce29c5d1c5211e316ae43f6';
var REQUEST_URL_BASE_IMG = 'https://image.tmdb.org/t/p/w154/'
class Movies extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
var cast = "";
}
componentDidMount() {
this.fetchData(); //1st collection pulled
}
fetchData(){
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.results),
loaded: true,
});
})
.done();
}
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading movies...
</Text>
</View>
);
}
// fetchData2(movie){
// fetch('https://api.themoviedb.org/3/movie/'+movie.id+'/credits?api_key=a667a62ffce29c5d1c5211e316ae43f6')
// .then((response) => response.json())
// .then((responseJson) => {
// cast: responseJson.cast;
// })
// .catch((error) => {
// console.error(error);
// });
// }
renderMovie(movie,arr) {
var arr = [];
// I want the cast variable to be displayed on the screen. It is coming either undefined or prints "s1" which indicates no data.
fetch('https://api.themoviedb.org/3/movie/'+movie.id+'/credits?api_key=a667a62ffce29c5d1c5211e316ae43f6')
.then((response) => response.json())
.then((responseJson) => {
//cast: responseJson.cast;
//test = displaycast(responseJson.cast[0].name);
var cast = responseJson.cast[0].name;
console.log(cast);
})
.catch((error) => {
console.error(error);
});
// fetch('https://api.themoviedb.org/3/movie/'+movie.id+'/credits?api_key=a667a62ffce29c5d1c5211e316ae43f6')
// .then((response) => response.json())
// .then((responseJson) => {
// this.setState({
// cast: responseJson.cast,
// });
// })
// .catch((error) => {
// console.error(error);
// });
return (
<View style={styles.container}>
<Image
source={{uri: 'https://image.tmdb.org/t/p/w92/'+ movie.poster_path.replace(/\//g,"")}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{cast}</Text>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('Movies', () => Movies);
This is my code. My main concern is that I am getting the response from fetchData inside the renderMovie perfectly and storing it in cast variable. But if I try to access cast variable outside fetch. It shows undefined or empty string.
The entire point of not having this fetch with earlier is because I want to use the fetch response of 1st fetch Operation to get move.id and use it in the 2nd fetch request to get more details.
That's happening because JavaScript is asynchronous. I'd recommend doing something like your other fetch and set a loading state to know when you've fetched the cast and use that to render.