Saving Array of Object on AsyncStorage React Native

Question

I am trying to both save & read the data which is array of object inside my local storage. The saving process is already done , below is my object structure to give more insight :

There are two type of category : INCOME and OUTCOME, hence i am using those category for my KEY on saving the entry, the full code is shown below :

const onSubmit = async () => {
    const newData = {
      category: type,
      title: title,
      note: note,
      amount: amount,
      date: date,
    };
    try {
      const jsonData = JSON.stringify(newData);
      let existingTransactions = await getTransaction(newData.category);
      const updatedTransactions = [...existingTransactions, jsonData];
      await AsyncStorage.setItem(
        newData.category,
        JSON.stringify(updatedTransactions)
      );
    } catch (err) {
      console.log(err);
    }
  };

  const getTransaction = async (category) => {
    let transactions = await AsyncStorage.getItem(category);
    if (transactions) {
      return JSON.parse(transactions);
    } else {
      return [];
    }
  };

Basically before saving new object , I need to read the previous saved array and then push the new object into the existing array, and finally save them all using the setItem. Below is the array of object whenever i saved new object it printed on the console :

My question are :

1. Am I doing the right thing with the KEY ? Or i should make the key unique for each object ?

2. Whenever I tried to read those array using getItem and then map the array, I cant get the data that I wanted , I can only get the full object like below :

But I cant get let say only the category or only the title of each object.

Here are the codes that i use to read the array :

const [data, setData] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const value = await AsyncStorage.getItem(category);
      const arrayData = JSON.parse(value);
      console.log(arrayData);
      setData(arrayData);
    }
    fetchData();
  }, []);
  
 {data.map((entry, index) => {
   return <Text key={index}>{entry}</Text>;
 })}

Dharman · Accepted Answer · 2021-07-23 05:43:17Z

I'm familiar with React.js, not React Native. However, from what I've read, you've made a mistake using JSON.stringify too early.

// const onSubmit = async () => {
// ...
    try {
      const jsonData = JSON.stringify(newData); // convert object to string
      let existingTransactions = await getTransaction(newData.category);
      const updatedTransactions = [...existingTransactions, jsonData]; // you're having array of string, not array of object
      await AsyncStorage.setItem(
        newData.category,
        JSON.stringify(updatedTransactions)
      );
    } 
// ...

Get rid of first JSON.stringify, then change the code little bit like this

// const onSubmit = async () => {
// ...
    try {
      let existingTransactions = await getTransaction(newData.category);
      const updatedTransactions = [...existingTransactions, newData]; // notice the newData here
      await AsyncStorage.setItem(
        newData.category,
        JSON.stringify(updatedTransactions)
      );
    } 
// ...

Clear the storage first, then you can try again. Demikianlah.

Ruchi Tiwari · Accepted Answer · 2021-07-23 05:14:19Z

1

Anything stored in AsyncStorage should have a unique key to fetch it accordingly

You can store the array and fetch the array as done accordingly and then to get the specific json object by category name

  let category = transactions.find(o => o.category === 'Your category name');

answered Jul 23, 2021 at 5:14

Ruchi Tiwari

2611 silver badge4 bronze badges

1 Comment

Bagus Amrullah Fikri Over a year ago

Noted,Thank you for the suggestion !!

Collectives™ on Stack Overflow

Saving Array of Object on AsyncStorage React Native

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related