Update object array key with new value in javascript/React-native

Question

I have the following Object array stored using AsyncStorage:

[
  {
    "groupId": 1,
    "id": 1,
    "name": "a",
  },
  {
    "groupId": 2,
    "id": 2,
    "name": "ab",
  },
  {
    "groupId": 3,
    "id": 3,
    "name": "abc",
  },
  {
    "groupId": 2,
    "id": 4,
    "name": "abcd",
  },
]

I'm retrieving the data to display it in a Flatlist but instead of displaying the groupId, I would like to display the groupName for each item.

I have another key with groups stored:

[
 {
  "groupName": "g1",
  "id": 1,
 },
 {
  "groupName": "g2",
  "id": 2,
 }
]

I made a function to retrieve the groupName based on groupId. This works fine:

const getGroupName = async (groupIdToFind) => {
    const existingsGroups = (await AsyncStorage.getItem("groups")) || "[]"; 
    const existingsGroupsParsed = JSON.parse(existingsGroups);

    const groupDataFound = existingsGroupsParsed.find(
      (results) => results.id.toString().indexOf(groupIdToFind) > -1
    );

    if (groupDataFound) {
      return groupDataFound.groupName;
    }
    return false;
  };

And I thought of modifying the data retrieved from the storage in my loadFlatlist function but this is where I'm struggling.

const loadFlatlist = async (storageKey) => {
try {
  let itemsOnStorage = await AsyncStorage.getItem(storageKey);

  itemsOnStorage = JSON.parse(itemsOnStorage);

  if (itemsOnStorage !== null) {
    let finalItemsOnStorage = "";
    itemsOnStorage.map(async function (obj) {
      console.log(obj.groupId);  // Correctly returns 1, 2, 3 ...

      let retrievedGroupName = await getGroupName(obj.groupId);
      console.log(retrievedGroupName);   // Correctly returns g1, g2 ...

      finalItemsOnStorage = await update(itemsOnStorage, {
        groupId: { $set: retrievedGroupName },
      });
    });

    console.log(finalItemsOnStorage);  // Returns same content as itemsOnStorage

    setDataOnDevice(itemsOnStorage);  // This will be loaded in my flatlist
  }
} catch (err) {
  alert(err);
}
  };

The problem is in loadFlatlist, I did not manage to replace the groupId by the groupName. finalItemsOnStorage has the same content as itemsOnStorage.

Can you see what is wrong with my function? Is there a better way to do this?

Jagjeet Singh · Accepted Answer · 2021-02-12 05:07:01Z

1

Try like this

const loadFlatlist = async (storageKey) => {
try {
  let itemsOnStorage = await AsyncStorage.getItem(storageKey);
  itemsOnStorage = JSON.parse(itemsOnStorage);

  const existingsGroups = (await AsyncStorage.getItem("groups")) || "[]"; 
  const existingsGroupsParsed = JSON.parse(existingsGroups);

  if (itemsOnStorage !== null) {
    let finalItemsOnStorage = [];

    itemsOnStorage.forEach(item => {

       let index = existingsGroupsParsed.findIndex(obj => obj.id === 
     item.groupId)

            if(index != -1) {
                finalItemsOnStorage.push({...item,
                              groupId:existingsGroupsParsed[index].groupName})
                          }
                });

    console.log(finalItemsOnStorage);  

    setDataOnDevice(finalItemsOnStorage);   
  }
} catch (err) {
  alert(err);
}
  };

answered Feb 12, 2021 at 5:07

Jagjeet Singh

5053 silver badges9 bronze badges

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

1 Comment

Jagjeet Singh Over a year ago

Glad to help :)

Collectives™ on Stack Overflow

Update object array key with new value in javascript/React-native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related