CODEWITHSUNDEEP
react-nativeexpoasyncstorage
robinnlmn
robinnlmn

Reputation: 31

AsyncStorage saving array in wrong format

I've been building a journal app and i want to save the days in AsyncStorage, that works but if I want to add an day it's getting weired this is my funtionc:
This is the return: [[[{"date":"t","value":"t","name":"t"}],{"date":"p","value":"p","name":"p"}],{"date":"h","value":"h","name":"h"}]

async function createDay(date: string, journal: string, name: string) {
    try {

        try {
            const getalldays = await AsyncStorage.getItem('@journal')
            const alldays = await JSON.parse(getalldays!)

            if (JSON.parse(alldays!) !== null) {
                console.log('SHORT')
                await alldays!.push(JSON.parse(alldays!))
            }

            const newDay = { date: date, value: journal, name: name }
            await alldays.push(newDay)

            await AsyncStorage.setItem('@journal', JSON.stringify(alldays))

            const newall = await AsyncStorage.getItem('@journal')

            console.log(newall)

            return;
        } catch (error) {
            console.log(error)
            return;
        }
    } catch (err) {
        console.error(err)
    }
}

Upvotes: 0

Views: 388

Answers (1)

Kartikey
Kartikey

Reputation: 4992

As far as I understand the problem, you want to store the data in this format

[
  { date: 'h', value: 'h', name: 'h' },
  { date: 'h', value: 'h', name: 'h' },
  { date: 'h', value: 'h', name: 'h' },
  { date: 'h', value: 'h', name: 'h' },
]

I would suggest you to create a helper file for all Storage operations

Step 1:

Create a folder called storage where your App.js is located. Now inside storage folder, create a file called AsyncStore.js which should look like this

AsyncStore.js

import AsyncStorage from '@react-native-async-storage/async-storage';

const setData = async (token, value) => {
  try {
    await AsyncStorage.setItem(token, JSON.stringify(value));
    return true;
  } catch (e) {
    return false;
  }
};

const getData = async (token) => {
  try {
    const jsonValue = await AsyncStorage.getItem(token);
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    return null;
  }
};

const removeData = async (token) => {
  try {
    await AsyncStorage.removeItem(token);
  } catch (e) {
    return null;
  }
};

export default { setData, getData, removeData };

Step 2:

Change your storing function createDay to this

async function createDay(date, journal, name) {
  try {
    const response = await Storage.getData('@journal'); // Get last data stored

    let tempData = []; // Make a new array

    if (response) tempData = [...response]; // Copy elements if array is not null

    tempData.push({ date: 'h', value: 'h', name: 'h' }); // Push New element to array

    await Storage.setData('@journal', tempData); // Set new Array in local Storage
  } catch (err) {
    console.error(err); // Some error while storing data
  }
}

Result

I've made an example Snack here for you to see the working implementation. If you want to check if data is getting stored perfectly, you can check as shown below

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

import AsyncStore from './storage/AsyncStore';

export default function App() {
  const [JournalData, SetJournalData] = React.useState([]);

  React.useEffect(() => {
    RestoreData(); // Restoring the last data stored here
  }, []);

  const RestoreData = async () => {
    try {
      const response = await AsyncStore.getData('@journal');
      if (response) {
        console.log(response);
        SetJournalData(response);
      }
    } catch (e) {
      console.log(e);
    }
  };

  async function createDay(date, journal, name) {
    try {
      const response = await AsyncStore.getData('@journal'); // Get last data stored

      let tempData = []; // Make a new array

      if (response) tempData = [...response]; // Copy elements if array is not null

      tempData.push({ date: 'h', value: 'h', name: 'h' }); // Push New element to array

      SetJournalData(tempData);
      await AsyncStore.setData('@journal', tempData); // Set new Array in local Storage
    } catch (err) {
      console.error(err); // Some error while storing data
    }
  }

  return (
    <View style={styles.container}>
      <Button title="Add Some Data" onPress={createDay} />
      <Text>{`Listing total ${JournalData.length} items`}</Text>
      {JournalData.map((item, index) => (
        <Text
          key={
            index
          }>{`item Number = ${index} date = ${item.date} value = ${item.value} name = ${item.name}`}</Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Upvotes: 2

Related Questions