Estoy tratando de generar las migas de pan desde mi base de datos, actualmente funciona, pero por problemas de construcción de la miga de pan, existen muchos ID que se repiten, y en algunos no tienen coherencias ya que existe algo como.
Como ven, ese Consolas y videojuegos no tendría porque estar ahí, tengo el siguiente código
import React, { Component } from "react";
import "./BreadCrumbs.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
class BreadCrumbs extends Component {
render() {
return (
<div className="breadcrumbs-wrap">
<span className="breadcrumbs">ruta</span>
<FontAwesomeIcon icon={faChevronRight} className="breadcrumbs" />
<span className="breadcrumbs">ruta</span>
<FontAwesomeIcon icon={faChevronRight} className="breadcrumbs" />
<span className="breadcrumbs">ruta</span>
</div>
);
}
}
export default BreadCrumbs;
// proviene desde la db
{mdata.breadcum.map((item, i) => (
<><FontAwesomeIcon icon={faAngleRight} />
<Link key={i} href="/categoria/[category]" as={"/categoria/" + item.name}>
<a>
{item.name}
</a>
</Link></>
))}
Hasta ahí funciona pero en algunos no se le encuentra la lógica, debido a la cantidad de registros que se deben organizar, podría tardar mucho mas tiempo de lo normal, por lo que ahora es un proceso fundamental para poder iniciar en producción…
Mi pregunta es, de que forma puedo hacer lo mismo pero desde el código, es decir, sin la necesidad de consumir directamente desde la base de datos, sino desde la parte del front
Este es el JSON_ que llena la miga de pan y el detalle del producto
{
asin: 'B07D3NGY3C',
brand: 'Manhattan',
breadcum: [
{ category_id: 172282, name: 'Computadoras y accesorios' },
{ category_id: 1292115011, name: 'Monitores' },
{ category_id: 4150, name: 'Computación' }
],
category: {
banner: ' ',
category_id: 1292115011,
created_since: '2021-01-19 15:45:29.145808',
fullname: 'Computación/Computadoras y accesorios/Monitores',
in_menu: 0,
name: 'Monitores',
parent_id: 172282,
parent_path: '4150/172282/1292115011',
status: 1,
updated_since: '2021-01-19 15:45:29.145808'
},
category_id: 1292115011,
category_tree: '',
color: 'Negro',
created_since: '2020-11-18 19:48:48.567498',
description: 'Administre el escritorio. Maximice la productividad. La instalación de un monitor LCD sobre el escritorio ayuda a maximizar la eficacia de un espacio de trabajo potencial. El soporte para monitor doble universal Manhattan con brazos oscilantes de doble enlace mejora la organización en el escritorio, lo que facilita el trabajo en la computadora.Construido en acero duradero, este soporte para monitor doble cuenta con una base resistente que permite una rápida, fácil y segura Montaje sin necesidad de perforar escritorios o encimeras. Sus configuraciones de inclinación, rotación, de lado a lado, altura y tensión totalmente ajustables crean la posición perfecta para aumentar cómodamente la productividad. Estas capacidades de ajuste pueden incluso ayudar a reducir la fatiga ocular o la tensión del cuello y la espalda. Además, el poste de montaje ofrece una fácil rotación del monitor para permitir que otros vean presentaciones y producciones multimedia desde casi cualquier dirección.',
discount: '0.00',
earnings_percentage: '0.28',
edition: '',
features: 'Cumple con los estándares VESA: sostiene de forma segura dos monitores LCD de 13 ”a 32” Coloca los monitores sobre el escritorio para aumentar el trabajo espacio, mejore la visibilidad y minimice el desorden Brazos oscilantes de doble enlace con inclinación separada de 45 °, rotación de 180 ° y ajustes de altura variable Poste de acero con soporte de escritorio para trabajo pesado - Placas VESA extraíbles, lo que agiliza y facilita la instalación del monitor Garantía de por vida Cuando se compra al fabricante o se autoriza revendedor',
format: '',
genre: 'None',
height: '18.30705',
images: [
{
created_since: '2020-12-31 08:00:34.293752',
file_id: 1017750045,
main: 1,
product_id: 46796690,
status: 1,
updated_since: null,
url: 'https://images-na.ssl-images-amazon.com/images/I/417GaI+Uu8L.jpg'
},
{
created_since: '2020-12-31 08:00:34.293752',
file_id: 1032010360,
main: 0,
product_id: 46796690,
status: 1,
updated_since: null,
url: 'https://images-na.ssl-images-amazon.com/images/I/41lydO4kkLL.jpg'
},
{
created_since: '2020-12-31 08:00:34.293752',
file_id: 1063653254,
main: 0,
product_id: 46796690,
status: 1,
updated_since: null,
url: 'https://images-na.ssl-images-amazon.com/images/I/312Tlus1+kL.jpg'
},
{
created_since: '2020-12-31 08:00:34.293752',
file_id: 1083116774,
main: 0,
product_id: 46796690,
status: 1,
updated_since: null,
url: 'https://images-na.ssl-images-amazon.com/images/I/41D3D01nrDL.jpg'
}
],
information: 'Cumple con los estándares VESA: sostiene de forma segura dos monitores LCD de 13 ”a 32” Coloca los monitores sobre el escritorio para aumentar el trabajo espacio, mejore la visibilidad y minimice el desorden Brazos oscilantes de doble enlace con inclinación separada de 45 °, rotación de 180 ° y ajustes de altura variable Poste de acero con soporte de escritorio para trabajo pesado - Placas VESA extraíbles, lo que agiliza y facilita la instalación del monitor Garantía de por vida Cuando se compra al fabricante o se autoriza revendedor',
is_adult_product: 0,
is_prime: 1,
length: '1.4960600000000002',
model: '461559',
package_height: '4.13385',
package_length: '19.2913',
package_quantity: '-1',
package_weight: '10.9349281952',
package_width: '11.57478',
platform: '',
price: '503331.92',
product_group: 'Personal Computer',
product_id: 46796690,
size: '',
sku: '',
status: 1,
stock: 5,
store_id: null,
title: ' soporte universal para dos monitores con brazos oscilantes de doble enlace Sostiene dos monitores LCD de 13 "a 32" de hasta 8 kg (17 Lbs.), Negro',
type: 'MONITOR',
updated_since: '2020-12-30 00:00:00',
usd: '$ 89,00',
user: { last_name: '', name: 'SpiceStock', photo: null, user_id: 16 },
user_id: 16,
weight: '9.900960186419999',
width: '31.417260000000002'
}