Puede recorrer los valores de cada objeto en la matriz, crear elementos de lista a partir de cada uno de ellos y agregarlos al elemento de lista.

 let obj = { edges: [ {name: 'Bath', path: '/bath/', entityId: 18}, {name: 'Shop App', path: '/shop-all/', entityId: 23} ] } let ul = document.createElement('ul'); for(const x of obj.edges) for(const textContent of Object.values(x)) ul.append(Object.assign(document.createElement('li'), {textContent})); document.body.append(ul);

2 maneras

Hay 2 soluciones que puedo pensar en este momento.

<Array>.forEach()

Esta solución es la mejor si desea registrar los elementos individuales de la matriz.
Hay una mejor manera de cambiar los elementos de la matriz, pero veamos el ejemplo.

 const arr = [{ name: "Home", path: "/home" }, { name: "Forums", path: "/forums" }]; arr.forEach((value) => { console.log(value); }); // { name: "Home", path: "/home" } // { name: "Forums", path: "/forums" } // You can map it to a new value by doing this const newArr = []; arr.forEach((value) => { newArr.push(value.name); }); console.log(newArr); // ["Home", "Forums"]

<Matriz>.mapa()

Esta es la mejor solución que usaría.
Este método cambia el valor del elemento individual a lo que devuelve en su función.

 const arr = [{ name: "Home", path: "/home" }, { name: "Forums", path: "/forums" }]; const newArr = arr.map((value) => value.name); console.log(newArr); // ["Home", "Forums"] // Notice how the value has changed

La solución

Así es como se verá la solución

 function YourComponent() { const edges = product.categories.edges; const products = edges.map((value) => [value.name, value.path, value.entityId.toString()]); return ( { products.map((data) => { return ( <li>data[0]</li> <li>data[1]</li> <li>data[2]</li> ); }); } ); };