CODEWITHSUNDEEP
phpjsonmultidimensional-arrayreact-native
Ujjwal Nepal
Ujjwal Nepal

Reputation: 546

Working with nested array in react native

I am making a quiz app in react native, I have written an API in PHP which fetches the question and the options from the database, with the response from API looking something like

[{"id":2109,
"title":"\u0915\u0930\u094d\u0923\u093e\u0932\u0940 \u0928\u0926\u0940\u0915\u094b \u0938\u0939\u093e\u092f\u0915 \u0928\u0926\u0940 \u0924\u0932\u0915\u093e \u092e\u0927\u094d\u092f\u0947 \u0915\u0941\u0928 \u0939\u094b\u0907\u0928 ?",
"option":[{
     "option_id":191061,
     "options":"\u0939\u0941\u092e\u094d\u0932\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
     "correct":0
},
{
     "option_id":191062,
     "options":"\u0920\u0942\u0932\u094b \u092d\u0947\u0930\u0940",
     "correct":0},
{
     "option_id":191060,
     "options":"\u092e\u0941\u0917\u0941 \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
     "correct":0
},{
     "option_id":191059,
     "options":"\u0921\u094b\u0932\u094d\u092a\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
     "correct":1
}
]}]
................................

and so on,

Upto now I have successfully fetched the json in my react app as the way I like. But now I want to select only one option for each question, I want the option to be highlighted as per the user selection also I have to check if the user is correct or not by verifying with the json response.

How can I achieve this?

the full code is here:

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TouchableHighlight,
 Alert,
 Navigator,
 WebView,
 ScrollView,
 ListView
} from 'react-native';
export default class Api extends Component{
  constructor(){
   super()
   this.state = {
     id:'',
    option_id:'',
  option_option:[],
  options_ans:[],
  title:'',
  data:[],
  userSelectedIndex:-1,
  }
  }

  componentWillMount(){
     fetch('http://192.168.1.11/loksewaquiz/index.php?      exam_of=kharidar', {method: 'GET'})
 .then((response) => response.json())
.then((responseData) =>{
    this.setState({
      data:responseData,
    })
   })
  .done();
  }
   onUserSelectedOption(index){
    this.setState({
      userSelectedIndex:index,

    });
  }
  render(){

    const result = this.state.data.map((data) =>{
    const xx = data.ans_option.map((ans_option,index)=>{
      return (
        <TouchableHighlight onPress={()=>   this.onUserSelectedOption(ans_option, index)}>
         <Text key={ans_option.option_id} style={{backgroundColor:   (index === this.state.userSelectedIndex) ? 'red' : 'transparent'}}>  {ans_option.option_option}</Text>
       </TouchableHighlight>
      )
     })

    return(
      <View>
        <Text style={styles.titles}>{data.title}</Text>
       {xx}
       </View>
    )

  })
  return(
    <ScrollView>
      {result}
    </ScrollView>

    );
  }

}

 const styles = StyleSheet.create({
 container: {
  flex: 1,
  flexDirection:'row',
  justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
  },
 button:{
   backgroundColor:'#EEE',
   padding:10,
   marginRight:5,
   marginLeft:5,
   },
  options:{
   padding:10,
   marginRight:5,
   marginLeft:5,
   backgroundColor:'#EEE',
   },
   titles:{
    backgroundColor:'#000',
    color:'#FFF',
  },
  selectedoptions:{
    backgroundColor:'#008000',
  }
  });

Here is the image when I select the first option

This is when I press the third option

Upvotes: 0

Views: 1084

Answers (2)

agenthunt
agenthunt

Reputation: 8678

Something like this , updated with one of the ways highlighting can be done

onUserSelectedOption = (option, index) => {
  this.setState({
      userSelectedIndex: index
   });
  if (option.correct === 1) {
   //do something
  }else {
   //do something
  }
}
render(){
    const result = this.state.data.map((data) =>{
    const xx = data.option.map((option, index)=>{
    return (
      <TouchableHighlight onPress={() => this.onUserSelectedOption(option, index)}>
        <Text key={option.option_id} style={{backgroundColor: index === this.state.userSelectedIndex ? 'red' : 'transparent' }}>{option.options}</Text>
      </TouchableHighlight>
    )
  })
  return(
    <View>
      <Text style={styles.titles}>{data.title}</Text>
      {xx}
      </View>
  )
})
return(
  <ScrollView>
    {result}
  </ScrollView>

);
}

Upvotes: 1

Arda Ilgaz
Arda Ilgaz

Reputation: 65

I would actually seperate the options in a new component, and pass relevant data via props. Not an expert on js, but sounds more solid then nested map functions.

Upvotes: 0

Related Questions