I have a text component
<Text ref="text" style{...}>{this.state.te}</Text>
and I would like to insert and append other <Text></Text>
so when the event fires on a button I want it to insert a new <Text></Text> to look like this
<Text ref="text" style{...}>
<Text ref="text" style{...}>first</Text>
<Text ref="text" style{...}>second</Text>
<Text ref="text" style{...}>third</Text>
</Text>
this is what my event looks like
insertText(){
this.setState({te: this.state.te + <Text style={...}>{this.refs.newText.props.value}</Text>})
}
when I do this all it renders is "[object object]" inside of the Text Component
if I use
this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>})
it will render the text just fine with a single <Text></Text> element.
any help would be appreciated. Thanks.
Edit:
this.state.te holds te: <Text></Text>
Ok, check out what I have below. I've essentially created an array of text values that are place in between two <Text> fields, and when the insertText function is called, it pushes a new text element to the array, then resets the state of the array to the te property:
getInitialState: function() {
return {
te: [<Text>Yo</Text>],
index:1
}
},
insertText: function() {
this.state.te.push(
<Text>Text number {this.state.index}</Text>
)
this.setState({
index: this.state.index + 1,
te: this.state.te
})
},
render: function() {
var MyText = function(t) {
return(
<Text>
{t}
</Text>
)
}
return (
<View style={styles.container}>
{MyText(this.state.te)}
<TouchableHighlight onPress={ () => this.insertText() } style={{ marginTop:20, height:60, flexDirection: 'row', backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 22 }}>Add Text</Text>
</TouchableHighlight>
</View>
);
I've set up the full working project here. Full code is also posted below.
https://rnplay.org/apps/Itk6RQ
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var SampleApp = React.createClass({
getInitialState: function() {
return {
te: [<Text>Yo</Text>],
index:1
}
},
insertText: function() {
this.state.te.push(
<Text>Text number {this.state.index}</Text>
)
this.setState({
index: this.state.index + 1,
te: this.state.te
})
},
render: function() {
var MyText = function(t) {
return(
<Text>
{t}
</Text>
)
}
return (
<View style={styles.container}>
{MyText(this.state.te)}
<TouchableHighlight onPress={ () => this.insertText() } style={{ marginTop:20, height:60, flexDirection: 'row', backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 22 }}>Add Text</Text>
</TouchableHighlight>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
Related
I'd like help regarding the test code in the expo-camera, I am using expo go and once I run the code, it gives me this error: TypeError: undefined is not an object (evaluating '_expoCamera.CameraType.back'), here is the documentation for the expo-camera: https://docs.expo.dev/versions/latest/sdk/camera/ , I am currently using expocamera 12.3.0 and have used navigation.navigate to navigate to this tab thanks ! and here is the code I directly copied from the site
import { Camera, CameraType } from 'expo-camera';
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [type, setType] = useState(CameraType.back);
const [permission, requestPermission] = Camera.useCameraPermissions();
if (!permission) {
// Camera permissions are still loading
return <View />;
}
if (!permission.granted) {
// Camera permissions are not granted yet
return (
<View style={styles.container}>
<Text style={{ textAlign: 'center' }}>
We need your permission to show the camera
</Text>
<Button onPress={requestPermission} title="grant permission" />
</View>
);
}
function toggleCameraType() {
setType((current) => (
current === CameraType.back ? CameraType.front : CameraType.back
));
}
return (
<View style={styles.container}>
<Camera style={styles.camera} type={type}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={toggleCameraType}>
<Text style={styles.text}>Flip Camera</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
margin: 64,
},
button: {
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 24,
fontWeight: 'bold',
color: 'white',
},
});
Update: fixed it, just changed CameraType.back into Camera.Constants.Type.back, solved
I have multiple functions that looks almost identical. How can I refactor my function so that I don't have write multiple functions.
This is my code:
renderImage = () => {
var imgSource = this.state.image? imageOne : imageTwo;
return (
<View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
<Image
style={{width:46, height:46}}
source={ imgSource }
/>
<Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>some text</Text>
</View>
);
}
I have another function that looks very similar:
renderImage2 = () => {
var imgSource = this.state.image2? imageThree : imageFour;
return (
<View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
<Image
style={{width:46, height:46}}
//I want to change source
source={ imgSource }
/>
//Also I want to change text
<Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>some other text</Text>
</View>
);
}
I just want to change the Image source and the text. Can I do this?
Create another component that returns the render but takes 2 props you pass in (source, text)
import React from 'react';
import { Image, Text, View } from 'react-native';
class ImageWithText extends React.PureComponent {
render() {
const { source, text } = this.props;
return (
<View style={{ marginLeft: 20, marginTop: 20, width: 50, height: 67, backgroundColor: 'transparent', alignItems: 'center' }}>
<Image style={{ width: 46, height: 46 }} source={source} />
<Text style={{ paddingTop: 4, fontSize: 11, color: '#4a4a4a' }}>{text}</Text>
</View>
);
}
}
export default ImageWithText;
and when you want to use the new component
renderImage = () => {
var imgSource = this.state.image? imageOne : imageTwo;
return (
<ImageWithText source={imgSource} text="some text">
);
}
You can first define a renderImage function that takes in a parameter to do decision making. Within this renderImage function, define all the possible images to load within a lookup object, such as below
renderImage = (renderImage) => {
const lookup = {
image_1: { src: imageOne, text: 'text_for_image_one' },
image_2: { src: imageTwo, text: 'text_for_image_two' }
}
const selectedImage = lookup[renderImage] || undefined;
if(!selectedImage) return;
return (
<View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
<Image
style={{width:46, height:46}}
source={selectedImage.src}
/>
<Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>{selectedImage.text}</Text>
</View>
);
}
Then within your render method do below
render() {
...
{this.renderImage(image_1)}
{this.renderImage(image_2)}
...
}
You can define simple function render like
renderImage = (imageSrc, text) => (
<View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
<Image
style={{width:46, height:46}}
//I want to change source
source={ imageSrc }
/>
//Also I want to change text
<Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>{text}</Text>
</View>
)
end use in your render like:
{this.renderImage(this.state.image? imageOne : imageTwo, 'some text')}
I want to send the data of a text input that is stored in a variable to another screen and show the data that was saved in said variable
Try to pass the state of the variable by react-navigation but the problem is that I have 3 screens and I want to pass the data stored in the variable text from screen 1 to screen 3
class Screen1 extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
percentage: ''
};
}
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state
var data = {
textData: params.text
}
return {
headerLeft: (
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<AntDesign
name="left"
color="rgba(0,0,0,0.5)"
size={30}
style={{ marginLeft: 5 }}
/>
<Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
</View>
),
headerRight: (
<View>
<TouchableOpacity
disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
onPress={() => navigation.navigate('2', { data })}
style={styles.Btn}>
<Text style={styles.TxtBtn}>Siguiente</Text>
</TouchableOpacity>
</View>
),
}
};
// set by a default value in componentDidMount to make the next button disable initially
componentDidMount() {
Alert.alert('Advertencia', 'Ingrese el porcentaje de su descuento');
this.props.navigation.setParams({ isDisable: true });
}
render() {
return (
<View style={styles.container}>
<View style={styles.Box}>
<ImageBackground source={require('../Icons/Regalo.png')} style={styles.Image}>
<View style={styles.ContainerInput}>
<TextInput
style={{ textAlign: 'center', color: '#fff', fontSize: 40, }}
type="numeric"
placeholder="%"
value={this.state.text} //set value from state
onChangeText={(text) => {
//when text length is greater than 0 than next button active otherwise it will be disable
let isDisable = text.length > 0 ? false : true
//set value in the state
this.setState({ text: text })
// set value to params
this.props.navigation.setParams({ isDisable: isDisable });
}} />
<Text style={{ fontSize: 40, color: '#fff', textAlign: 'center' }}>
{this.state.text.split(' ').map((word) => word && '%').join(' ')}
</Text>
</View>
</ImageBackground>
</View>
</View>
);
}
}
export default Screen1;
My Screen Two:
class Screen2 extends Component {
constructor(props) {
super(props);
this.state = {
textData: this.props.navigation.state.params.data.textData,
text: ''
};
}
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state
var data = {
textData: params.textData
}
return {
headerLeft: (
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<AntDesign
name="left"
color="rgba(0,0,0,0.5)"
size={30}
style={{ marginLeft: 5 }}
onPress={() => navigation.navigate('1')}
/>
<Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
</View>
),
headerRight: (
<View>
<TouchableOpacity
disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
onPress={() => navigation.navigate('3', { data })}
style={styles.Btn}>
<Text style={styles.TxtBtn}>Crear</Text>
</TouchableOpacity>
</View>
),
}
};
componentDidMount() {
this.props.navigation.setParams({ isDisable: true });
}
render() {
return (
<View style={styles.container}>
<View style={styles.InputContainer}>
<TextInput
multiline
style={styles.Input}
type="numeric"
placeholder="Describa los términos y condificones de tu regalos"
placeholderTextColor="rgb(196,196,196)"
value={this.state.text} //set value from state
onChangeText={(text) => {
//when text length is greater than 0 than next button active otherwise it will be disable
let isDisable = text.length > 1 ? false : true
//set value in the state
this.setState({ text: text })
// set value to params
this.props.navigation.setParams({ isDisable: isDisable });
}} />
</View>
</View>
);
}
}
export default Screen2;
My Screen Three:
class Screen3 extends Component {
constructor(props) {
super(props);
this.state = {
textData: this.props.navigation.state.params.data.textData,
text: '',
percentage: '',
};
}
static navigationOptions = ({ navigation }) => ({
headerLeft: (
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<AntDesign
name="left"
color="rgba(0,0,0,0.5)"
size={30}
style={{ marginLeft: 5 }}
onPress={() => navigation.navigate('2')}
/>
<Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
</View>
),
headerRight: (
<View>
<TouchableOpacity
disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
onPress={() => navigation.navigate('4')}
style={styles.Btn}>
<Text style={styles.TxtBtn}>Crear</Text>
</TouchableOpacity>
</View>
),
});
// set by a default value in componentDidMount to make the next button disable initially
componentDidMount() {
this.props.navigation.setParams({ isDisable: true });
}
render() {
let datos = [{
value: 'Banana',
}, {
value: 'Mango',
}, {
value: 'Pear',
}];
var data = {
textData: this.state.textData
}
return (
<View style={styles.container}>
<View style={styles.BoxandInput}>
<View style={styles.ContainerInput}>
<TextInput
style={styles.Input}
multiline
placeholder='Escriba una Descripcion'
placeholderTextColor="rgb(196,196,196)"
maxLength={203}
/>
</View>
<View style={styles.Box}>
<ImageBackground
source={require('../Icons/Regalo.png')}
style={styles.Image}>
<View style={styles.ContainerText}>
<Text style={styles.TextBox}>{data}</Text>
</View>
</ImageBackground>
</View>
</View>
<View style={styles.Regalos}>
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<Text style={styles.line}>--------------------------</Text>
<Text style={styles.RegalosText}>Cantidad de Regalos</Text>
<Text style={styles.line}>--------------------------</Text>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
<TextInput
style={styles.RegalosInput}
placeholder='0'
placeholderTextColor='#000'
maxLength={6}
type='numeric'
/>
<View style={styles.LineInput} />
<Text style={{ fontSize: 10, color: '#ccc', textAlign: 'center', marginTop: 5 }}>60 regalos Disponibles</Text>
<TouchableOpacity style={{ marginTop: 15 }}>
<Text style={{ fontSize: 10, color: 'cyan', textAlign: 'center' }}>Comprar Regalos</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.ContainerServices}>
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<Text style={styles.line}>-----------------------------------</Text>
<Text style={styles.RegalosText}>Servicios</Text>
<Text style={styles.line}>-----------------------------------</Text>
</View>
<Dropdown
dropdownMargins={{ min: 5, max: 10 }}
label='Favorite Fruit'
data={datos}
/>
</View>
</View>
);
}
}
export default
This Problem
You can create a data object and you can send it with navigation to next UI. You can pass the data object from UI 1 to UI 2 and then you can send it UI 3 from UI 2.
In the first UI you can create data variable like,
var data = {
textData: text
}
Include the above code inside navigationOptions of your code.
Then in the navigation call include the data object as well.
onPress={() => navigation.navigate('2', {data})}
In the second UI assign the passed value to a variable inside the constructor.
constructor(props) {
super(props);
this.state = {
textData: this.props.navigation.state.params.data. textData,
}
}
Then when you are going to navigate to the third UI create a data variable and send it as previously done.
var data = {
textData: this.state.textData
}
Pass this variable with navigate.navigation and access it from third UI similar as in the second UI.
I have a really big problem and I don't know what I'm doing wrong. I also tried to debug everything and I didn't find any solution.
First of all lets say I have 2 components. FROM component A I send some props (array) to component B. I component B I load that props into my state and than I change some data in flatlist and store it on my state in that component. When I go back to previous screen, where is component A and going back to B, that flatlist is still the same and also PROPS stays the same.
Initial props from screen A: (when I firstly go to B component)
"listOfStudents":[{"key":"Suana Kristovski","id":"1358","checked":false,"o":false,"n":false}]
When I change item in flatlist and going back this is the props that arrived into component B:
listOfStudents":[{"key":"Suana Kristovski","id":"1358","checked":true,"o":false,"n":false}]
checked from false -> true,
Problem is that everything I do, I only change my state when item is changed in my flatlist.
Code in screen B:
componentDidMount() {
//console.log('Izvedem se vedno');
console.log('List of students Diary hours: ' + JSON.stringify(this.props.listOfStudents));
this.setState({
data: this.props.navigation.state.params.props.listOfStudents,
textOpombe: this.props.navigation.state.params.props.notes,
textVsebinaUre: this.props.navigation.state.params.props.lesson,
finished: this.props.navigation.state.params.props.finished,
absent: parseInt(this.props.navigation.state.params.props.apsent.substring(0,1)),
});
if(this.props.navigation.state.params.props.listOfStudents.length >= 2) {
this.setState({
height: 130
});
}
this.props.navigation.addListener('willBlur', (playload)=>{
});
}
My flatlist:
<FlatList
ref={(list) => this.myList = list}
style={[styles.flatList,{height: this.state.height}]}
data={this.state.data}
scrollEnabled = {this.state.scrollingChild}
contentContainerStyle={{ padding: 15 }}
renderItem={({ item }) => (
<View style={styles.listItemStyle}>
<View style={{flexDirection: 'row', marginBottom: 7, }}>
{
item.checked &&
<TouchableOpacity
onPress={this.changeCheckedToFalse.bind(this,item)}>
<View style={styles.checked} />
</TouchableOpacity> ||
<TouchableOpacity
onPress={this.changeCheckedToTrue.bind(this,item)}>
<View style={styles.unchecked} />
</TouchableOpacity>
}
<Text style={{color: '#000', opacity: 0.6}}>{item.key}</Text>
{
item.checked &&
<View style={{position: 'absolute', right: 0 }}>
<View style={{flexDirection: 'row'}} >
{
item.o &&
<TouchableOpacity
style={[styles.touchable1Ch,styles.iconStyle1]}
onPress={this.changeSelectionO.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>O</Text>
</TouchableOpacity> ||
<TouchableOpacity
style={[styles.touchable1,styles.iconStyle1]}
onPress={this.changeSelectionO.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>O</Text>
</TouchableOpacity>
}
{
item.n &&
<TouchableOpacity
style={[styles.touchable2Ch,styles.iconStyle1]}
onPress={this.changeSelectionN.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>N</Text>
</TouchableOpacity> ||
<TouchableOpacity
style={[styles.touchable2,styles.iconStyle1]}
onPress={this.changeSelectionN.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>N</Text>
</TouchableOpacity>
}
</View>
</View>
}
</View>
{
this.props.navigation.state.params.props.listOfStudents !== undefined && this.props.navigation.state.params.props.listOfStudents.length >= 2 ?
<View style={styles.line} /> : <Text></Text>
}
</View>
)}
keyExtractor={item => item.id}
/>
Methods for flatlist change item:
changeSelectionO(item) {
var data2 = this.state.data;
var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);
if(data2[itemIndex].o) {
data2[itemIndex].o = false;
} else {
data2[itemIndex].o = true;
if(data2[itemIndex].n) {
data2[itemIndex].n = false;
}
}
this.setState({
data: data2
});
//this.props.listOfStudents
}
changeSelectionN(item) {
var data2 = this.state.data;
var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);
if(data2[itemIndex].n) {
data2[itemIndex].n = false;
} else {
data2[itemIndex].n = true;
if(data2[itemIndex].o) {
data2[itemIndex].o = false;
}
}
this.setState({
data: data2
});
//this.props.listOfStudents
}
Can you please tell me why props is changing?
I’m having trouble accessing an array of objects in my JSON data to display in a React Native Text component.
JSON data
{
"name": "Pizza Joint",
"when": [{
"day": ["Sat", "Sun"],
"start_time": "11:00",
"end_time": "23:00"
}]
}
Code
<View style={styles.container}>
<Text style={styles.name}>{venue.name}</Text>
<Text style={styles.time}>{venue.when[0].start_time}</Text>
</View>
This throws the error Undefined is not an object (evaluating 'venue.when') which I don't understand since console.log(type of venue.when) returns object.
How can I access the when object properties here?
Additional notes
I copied the app structure from this tutorial.
Here is VenueList.js:
'use strict';
var React = require('react-native');
var VenueDetail = require('./VenueDetail');
var {
Image,
StyleSheet,
Text,
View,
Component,
ListView,
TouchableHighlight,
ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8
},
author: {
color: '#656565'
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
listView: {
backgroundColor: '#F5FCFF'
},
loading: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
// var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
var REQUEST_URL = 'http://apib.miniguide.es/wall/today';
class VenueList extends Component {
render() {
if (this.state.isLoading) {
return this.renderLoadingView();
}
console.log(this.state.dataSource);
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderVenue.bind(this)}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<ActivityIndicatorIOS
size='large'/>
<Text>
Loading venues...
</Text>
</View>
);
}
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
isLoading: false
});
})
.done();
}
renderVenue(venue) {
console.log(venue);
return (
<TouchableHighlight onPress={() => this.showVenueDetail(venue)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<Image
// source={{uri: venue.images[0].url}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{venue.name}</Text>
<Text style={styles.author}>{venue.subtitle}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
module.exports = VenueList;
console.log(venue) produces the following format of data (I am simplifying output here for the purposes of the example):
{
name: 'Pizza Joint',
when: [{
day: ['Sat', 'Sun'],
start_time: '11:00',
end_time: '23:00'
}]
}
I notice the above is not JSON since the quotes on the keys have been stripped out.
Ok I figured it out. The problem was the JSON data set that our API produces has some documents with another definition that delimit the data (e.g. first is document that indicates featured). So React was throwing an error on the first document, which lacked the properties I was attempting to access.
To fix this, I added ternary expressions to the React components to check for the existence of properties:
renderVenue(venue) {
console.log(venue);
return (
<TouchableHighlight onPress={() => this.showVenueDetail(venue)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<Image source={ 'images' in venue ? { uri: 'http://' + venue.images[0].url } : null}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{venue.name}</Text>
<Text style={styles.author}>{venue.subtitle}</Text>
<Text style={styles.author}>{ 'when' in venue ? venue.when[0].start_date : null}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
Perhaps we should modify our API output.
In any event thanks for comments, they were helpful.