Problema:
Tengo una API y cada objeto dentro de la API no tiene un valor. Me gustaría agregar un valor único a cada objeto dentro de la matriz para poder crear una función y usar 'e.target.value' con detectores de eventos. Estoy haciendo esto en nextjs.
Por qué: porque quiero almacenar cada valor en una matriz y en un almacenamiento local antes de mostrar los datos almacenados en la matriz como un elemento favorito.
Hay alguna forma de hacer esto ?
Información:
data.items tiene más de 30 objetos -
"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, }Hasta ahora, mis datos han sido ordenados y mapeados así.
{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>Si desea agregar una clave de VALOR a cada objeto, puede hacer lo siguiente:
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); } })(); }, []);Notas:
Un ejemplo que usa el índice como único para fines de visualización.
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));