How to store multiple values in to objects within an array

Question

Problem:

I have an api and each object within the api doesn't have a value. I would like to add a unique value to each object within the array so that I can create a function and use 'e.target.value' with event listeners. I'm doing this in nextjs.

Why: Because I want to store each value in to an array and localstorage before eventually displaying the data that was stored in the array as like a favorites item.

Is there a way of doing this ?

Information:

data.items has over 30+ objects -

"items": [
    {
      "id": 119603782,
      "node_id": "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
      "name": "react-contextual",
      "full_name": "drcmda/react-contextual",
      "private": false,
      "owner": {
        "login": "drcmda",
        "id": 2223602,
}

{
      "id": 119603782,
      "node_id": "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
      "name": "react-contextual",
      "full_name": "drcmda/react-contextual",
      "private": false,
      "owner": {
        "login": "drcmda",
        "id": 2223602,
}

So far my data has been sorted and mapped like so.

{data.items
          .sort(function (a, b) {
            return b.stargazers_count - a.stargazers_count && new Date (b.created_at) - new Date(a.created_at) 
          })
          .map((d) => (
            
            <div onClick={checkId} key={d.id} className=" border-white p-5">
              
              <h1 className="text-2xl font-bold">Repo name: {d.name}</h1>

Why not just use the index as a unique key in the array If it is just for display purpose? — ikhvjs, Feb 04 '22 at 08:01
how? And, what would happen if I added a new object ? would it lose it's index position meaning the incorrect favorited element would be displaying? — someone, Feb 04 '22 at 09:08
If a new item is added. the new item index is increased by 1. No conflict, right? — ikhvjs, Feb 04 '22 at 09:11

score 0 · Answer 1 · answered Feb 04 '22 at 08:27

If you want add a VALUE key to each object you can do the following:

const [isLoading, setIsLoading] = useState(false),
    [items, setItems] = useState([]);

useEffect(() => {
    (async () => {
        setIsLoading(true);
        try {
            //you can replace axios with fetch
            const res = await axios('https://your-api'),
                // clone deep is from lodash => you can use the spread (...) operator if you want
                clonedItems = cloneDeep(res.data.items);

            clonedItems.forEach((el) => {
                // add whatever you want in the (value)
                el.value = 'required value';
            });
            //sort items based on the required key
            clonedItems.sort((a, b) => {
                //replace name with your key
                if (a.name.toLowerCase() < b.name.toLowerCase()) {
                    return -1;
                }
                if (a.name.toLowerCase() > b.name.toLowerCase()) {
                    return 1;
                }
                return 0;
            });
            //check the modified items
            console.log(clonedItems);

            setItems(clonedItems);
        } catch (err) {
            //replace it with your error handler code
            console.log(err);
        } finally {
            setIsLoading(false);
        }
    })();
}, []);

Notes:

You should sort your elements before storing it in the state
You can replace axios with fetch
you can use the spread operator (...) in place of cloneDeep from lodash

score 0 · Accepted Answer · answered Feb 04 '22 at 09:37

An example using index as unique for displaying purpose.

const data = {
    items: [
        {
            id: 119603782,
            node_id: "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
            name: "react-contextual",
            full_name: "drcmda/react-contextual",
            private: false,
            owner: {
                login: "drcmda",
                id: 2223602,
            },
        },
        {
            id: 119603782,
            node_id: "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
            name: "react-contextual",
            full_name: "drcmda/react-contextual",
            private: false,
            owner: {
                login: "drcmda",
                id: 2223602,
            },
        },
    ],
};

const items = data.items.map((item, idx) => ({ ...item, idx }));

// new item
const newItem = {
    id: 119603782,
    node_id: "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
    name: "react-contextual",
    full_name: "drcmda/react-contextual",
    private: false,
    owner: {
        login: "drcmda",
        id: 2223602,
    },
};

function addNewItems(items, newItem) {
    newItem.idx = items.length;
    items.push(newItem);
    return items;
}

console.log(addNewItems(items, newItem));

How to store multiple values in to objects within an array

2 Answers2