React Native - Return all JSON data in AsyncStorage?

Question

In my React Native app's AsyncStorage, I have multiple JSON objects, each with a unique key id like so:

 '62834456':
 data: { "foo": "bar",
 "nicknames": [ "grizz", "example" ],
 ... and so on }

They have been pushed into AsyncStorage stringified. I'm trying to retrieve every object by their id, and push both the id and its' JSON data into the component's state. I have this so far:

// for every key in async storage, push to favorites in state
importData = (id) => {
  for (id in AsyncStorage) {
    return AsyncStorage.getItem(id)
      .then(req => JSON.parse(req))
      .then(json => console.log(json))
      .catch(error => console.log('error!'));
  }
}

When console.logging 'json' in the above function, the result is null. How can I properly access all JSON objects in my AsyncStorage?

FINAL EDIT

Using your code example and removing JSON.parse (so simply console.logging req) returns this:

It appears this is happening because for some reason .forEach is returning the first string in the array, the array itself, then the second string.

Tukan · Accepted Answer · 2019-12-09 12:46:59Z

25

In order to get all AsyncStorage keys, you need to call AsyncStorage.getAllKeys(). In order to speed things up, you should also use AsyncStorage.multiGet() By doing that your code becomes;

importData = async () => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    const result = await AsyncStorage.multiGet(keys);

    return result.map(req => JSON.parse(req)).forEach(console.log);
  } catch (error) {
    console.error(error)
  }
}

edited Dec 9, 2019 at 12:46

answered Jan 10, 2018 at 20:35

Tukan

2,32118 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

zahnzy Over a year ago

So it looks like id isn't being using in this case, do I need to define it somewhere before passing it into importData()?

Tukan Over a year ago

Key is the id here, you can use normal getItem as keys is just an id array and connect them that way.

zahnzy Over a year ago

Thank you for your help. At the moment, I am having trouble getting things to display in the console after parsing.. i.e. In your example, if I console.log(req), nothing will display, not even a generic object response, the console is blank. Is this not the proper way to view these objects after being parsed?

Tukan Over a year ago

Could you check what is in keys? Perhaps there isn't anything set yet.

cammil Over a year ago

Why mix async / await with then and callbacks? Why not go the whole way as in @georgekpc 's answer?

|

georgekpc · Accepted Answer · 2018-07-02 23:25:48Z

6

here is a more elegant way to get all items using async/await functions

const fetchAllItems = async () => {
    try {
        const keys = await AsyncStorage.getAllKeys()
        const items = await AsyncStorage.multiGet(keys)

        return items
    } catch (error) {
        console.log(error, "problemo")
    }
}

answered Jul 2, 2018 at 23:25

georgekpc

2483 silver badges10 bronze badges

Comments

Ram Grandhi · Accepted Answer · 2020-05-27 15:05:02Z

4

May be, little straight forward using promises.

import { AsyncStorage } from 'react-native';

  AsyncStorage.getAllKeys()
    .then((keys)=> AsyncStorage.multiGet(keys)
                    .then((data) => console.log(data)));

Cheers!

answered May 27, 2020 at 15:05

Ram Grandhi

9818 silver badges9 bronze badges

Comments

Hossam Mourad · Accepted Answer · 2020-08-15 17:46:52Z

1

Something that I didn't prefer about the current answers is that it returns back an array of arrays which will make it harder to search for a specific key. Here is what I prefer to use:

const getAll = async () => {
  try {
    const result: any = {};
    const keys = await AsyncStorage.getAllKeys();
    for (const key of keys) {
      const val = await AsyncStorage.getItem(key);
      result[key] = val;
    }
    return result;
  } catch (error) {
    alert(error);
  }
};

This will return back an object with all the keys you have and their respective values.

edited Aug 15, 2020 at 17:46

answered Aug 15, 2020 at 17:25

Hossam Mourad

4,6934 gold badges30 silver badges23 bronze badges

Comments

Dayal Saini · Accepted Answer · 2019-08-07 09:33:29Z

0

Code for return a json object

    try {
        const keys = await AsyncStorage.getAllKeys()
        const itemsArray = await AsyncStorage.multiGet(keys)
        let object = {}
        itemsArray.map(item => {
          object[`${item[0]}`] = item[1]
        })
        return object
    }   catch (error) {
        console.log(error, 'error')
    }

answered Aug 7, 2019 at 9:33

Dayal Saini

12 bronze badges

Comments

sarath chandran · Accepted Answer · 2022-03-06 17:32:19Z

0

By using Object.fromEntries (doc)

const getAllData = async() => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    const result = await AsyncStorage.multiGet(keys);
    const obj = Object.fromEntries(result);
    // obj be like {"key1": "value 1", "key2": "value 2", .....}
    // Now parse the 
    Object.keys(obj).forEach(key => {
      obj[key] = JSON.parse(obj[key]);
    });
  } catch (error) {
    console.error(error);
  }
};

answered Mar 6, 2022 at 17:32

sarath chandran

134 bronze badges

Collectives™ on Stack Overflow

React Native - Return all JSON data in AsyncStorage?

6 Answers 6

8 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related