How to store multiple values in to objects within an array-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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));