Era un video de YouTube en ReactJS donde llenaba un contenedor div de un objeto de matriz usando .map() . ¿Hay alguna forma de hacerlo usando vanilla js o jquery en HTML simple? El código de ReactJS se proporciona a continuación:
Categorías de productos.JSX
import { categories } from "../dataList"; import CategoryItem from "./CategoryItem"; <div className="* * *"> {categories.map((item) => ( <CategoryItem item={item} key={item.id} /> ))} </div>CategoryItem.JSX
import styled from "styled-components"; <Container> <Image src={item.Image} /> <Info> <Title>{item.Title}</Title> <Button>SHOP NOW</Button> </Info> </Container>dataList.js
export const categories = [ { id: 1, Image: "https://i.ibb.co/CnkbTqm/download-ixid-Mnwx.jpg", Title: "Lorem", }, { id: 2, Image: "https://i.ibb.co/CnkbTqm/download-ixid.jpg", Title: "Ipsum", }, { id: 3, Image: "https://i.ibb.co/CnkbTqm/download.png", Title: "lorem", }, ];De una manera, usando reduce() :
reduce() , para cada objeto devuelva una cadena (concatenando el valor anterior) que contiene:<h1> creado con cat.Title<img> creado con cat.ImageinnerHTML de su elemento<body> como demostración const categories = [{id: 1, Image: "https://i.ibb.co/CnkbTqm/download-ixid-Mnwx.jpg", Title: "Lorem", }, {id: 2, Image: "https://i.ibb.co/CnkbTqm/download-ixid.jpg", Title: "Ipsum", }, {id: 3, Image: "https://i.ibb.co/CnkbTqm/download.png", Title: "lorem", }, ]; document.body.innerHTML = categories.reduce((prev, cat) => prev + `<h2>${cat.Title}</h2> <img src='${cat.Image}' />`, ''); Podemos obtener la misma idea/comportamiento/resultado usando map() y join() en lugar de reduce() así:
const categories = [{id: 1, Image: "https://i.ibb.co/CnkbTqm/download-ixid-Mnwx.jpg", Title: "Lorem", }, {id: 2, Image: "https://i.ibb.co/CnkbTqm/download-ixid.jpg", Title: "Ipsum", }, {id: 3, Image: "https://i.ibb.co/CnkbTqm/download.png", Title: "lorem", }, ]; document.body.innerHTML = categories.map(cat => `<h2>${cat.Title}</h2> <img src='${cat.Image}' />`).join('');puede usar createElement() api https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
aquí algunas ideas en vainilla
var div = document.createElement('div'); var link = document.createElement('a'); var article = document.createElement('article');y aqui en jquery
var elem = $('<div></div>')puede crear elementos y agregarlos al contenedor.