Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 48980

Values disapear after refresh in cascading dropdown

$
0
0

I generated a “double” cascading dropdown to choose values from and everything works well, the values get saved as they should and are also displayed as they should, but as soon as I refresh (which needs to happen automatically) the 2nd and 3rd value just disappear (but are still there inside the storage).

Inside the cascading dropdowns I save every chosen value to the storage and afterwards the next can be picked. And I just don´t know why it is not showing the values, because they are saved and with other values it is working fine…
In other dropdowns I just access the data via the value inside the IonSelect like this value={this.props.photoObject.id}, but it is just working until it refreshes…

The object holding all the values is sent to the dorpdown component to access it like this:

<Select photoObject={photo} />

The Select Component is right here:

class Select extends React.Component {

  constructor() {
    super();
    this.state = {
      DDL1: [],
      DDL2: [],
      DDL3: [],
      selectDDL1:"",
      selectDDL2:"",
      selectDDL3:"",
    };
  };

  componentDidMount() {
    this.setState({
      DDL1: parkData
    });
  };

  async handleChangeDDL1(target) {
    console.log("DDL1:",target);
    this.setState({selectDDL1: target});
    this.setState({DDL2: this.state.DDL1.find(x => x.bezirk === target).DDL2});

    const {value} = await Storage.get({key: PHOTO_STORAGE });
    let array = JSON.parse(value);
    let index = array.findIndex((array) => array.filepath === this.props.photoObject.filepath);
    if(index !== -1) {
      array[index] = {
          time: array[index].time,
          part: target,
          park: array[index].park,
          id: array[index].id,
        }
    } else {
        console.log("error");
    };
    await Storage.set({key: PHOTO_STORAGE, value: JSON.stringify(array)})

  }

  async handleChangeDDL2(target) {
    console.log("DDL2:",target);
    this.setState({selectDDL2: target});
    this.setState({DDL3: this.state.DDL2.find(x => x.objekt === target).DDL3});

    const {value} = await Storage.get({key: PHOTO_STORAGE });
    let array = JSON.parse(value);
    let index = array.findIndex((array) => array.filepath === this.props.photoObject.filepath);
    if(index !== -1) {
      array[index] = {
          time: array[index].time,
          part: array[index].part,
          park: target,
          id: array[index].id,
        }
    } else {
        console.log("error");
    };
    await Storage.set({key: PHOTO_STORAGE, value: JSON.stringify(array)});

  }

  async handleChangeDDL3(target) {
    console.log("DDL3:",target);
    this.setState({selectDDL3: target});

    const {value} = await Storage.get({key: PHOTO_STORAGE });
    let array = JSON.parse(value);
    let index = array.findIndex((array) => array.filepath === this.props.photoObject.filepath);
    if(index !== -1) {
      array[index] = {
          time: array[index].time,
          part: array[index].part,
          park: array[index].park,
          id: target,
        }
    } else {
        console.log("error");
    };
    await Storage.set({key: PHOTO_STORAGE, value: JSON.stringify(array)});

  }


  render() {
    return (
      <div>
        <IonItem>
          <IonLabel position="stacked">City</IonLabel>
          <IonSelect name="part" placeholder="Bitte wählen" value={this.props.photoObject.part} onIonChange={e => this.handleChangeDDL1(e.detail.value)}>
            {this.state.DDL1.map((x, index) => {
              return <IonSelectOption value={x.bezirk} key={index}>{x.ortsteil}</IonSelectOption>
            })}
          </IonSelect>
        </IonItem>
        <IonItem>
        <IonLabel position="stacked">Park</IonLabel>
        <IonSelect name="park" placeholder="Bitte wählen" value={this.props.photoObject.park} onIonChange={e => this.handleChangeDDL2(e.detail.value)}>
            {this.state.DDL2.map((x, index) => {
                return <IonSelectOption value={x.objekt} key={index}>{x.park}</IonSelectOption>
            })}
          </IonSelect>
        </IonItem>
        <IonItem>
        <IonLabel position="stacked">ID</IonLabel>
        <IonSelect name="id" placeholder="Bitte wählen" value={this.props.photoObject.id} onIonChange={e => this.handleChangeDDL3(e.detail.value)}>
            {this.state.DDL3.map((x, index) => {
                return <IonSelectOption value={x} key={index}>{x}</IonSelectOption>
            })}
          </IonSelect>
        </IonItem>
      </div>
    );
  }
}

The data to be displayed inside the cascading dropdowns comes from a external file with an array:

export let parkData = [
    {
        ortsteil: "city1",
        bezirk: "01",
        DDL2: [
          {
            park: "park12",
            objekt: "0112",
            DDL3: [1,2,3,4,5,6,7],
          }
        ],
        
    },
        {
        ortsteil: "city2",
        bezirk: "22",
        DDL2: [
          {
            park: "park07",
            objekt: "2207",
            DDL3: [1,2,3,4,5,6,7,8,9],
          }
        ]
    },
]

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 48980

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>