0

Estoy intentando pintar un objeto en pantalla pero ese objeto tiene otro objeto adentro y necesitaria pintar los datos de ese otro objeto en una lista. No encuentro la forma de hacerlo. Estoy usando React. Intenté con .map() pero no logro hacer que me liste los precios de todos los objetos de la lista de precios seleccionadas. No encuentro solucion, alguna ayuda?

Este es mi objeto

"value": [
        {
            "ItemCode": "R00083389-M",
            "ItemName": "GUANTE MOTORMAN COMANCHE NEGRO  M",
            "ItemPrices": [
                {
                    "PriceList": 1,
                    "Price": 4454.44,
                },
                {
                    "PriceList": 2,
                    "Price": 4454.44,
                    
                },

}
4
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 21 dic. 2021 a las 19:01
  • Lo siento mucho. Lo que necesito es que me muestre en pantalla el nombre del objeto pero con el precio de lista 2. No consigo acceder a ItemPrices -> PriceList 2 -> Price el 21 dic. 2021 a las 19:03
  • Te recomiendo que le eches un vistazo a este enlace para aprender como acceder a esos objetos anidados.
    – masterguru
    el 21 dic. 2021 a las 19:09
  • Te di una respuesta para que tengas una idea de como acceder a los precios, pero te sugiero que hagas mejor el planteo, que deseas obtener, como lo deseas mostrar. el 21 dic. 2021 a las 19:22

2 respuestas 2

1

podrías intentar algo así:

Suponiendo que tu array de objetos sea el siguiente (Que en realidad es un json):

const value = [
        {
            "ItemCode": "R00083389-M",
            "ItemName": "GUANTE MOTORMAN COMANCHE NEGRO  M",
            "ItemPrices": [
                {
                    "PriceList": 1,
                    "Price": 4454.44,
                },
                {
                    "PriceList": 2,
                    "Price": 4454.44,
                    
                }]

}]

Podrías acceder de la siguiente manera:

for(const item of value[0].ItemPrices){
console.log(item.Price)
}

O en react:

value[0].ItemPrices.map((elem)=> <p>{elem.Price}</p>)

Value empieza siendo un array, de ahí el value[0] ya que todo el json está dentro de ese array, luego nos posicionamos en ItemPrices y sobre eso hacemos el for o map de su array, donde por cada posición hay un objeto con PriceList y Price, nosotros accedemos por cada objeto dentro del array a su Price y lo mostramos. Espero te sirva para resolver o entender como funciona para poder ajustarlo a tus necesidades.


Si lo que deseas es acceder a un valor específico dependiendo de la lista deseada, podrías hacer algo así:

Para que puedas probar con diferentes listas, esto quizás lo recibes de algun elemento, tipo un select, u otro..

let lista = 1

Luego accedemos mediante:

value[0].ItemPrices.find((elem)=>elem.PriceList===lista).Price

El find una vez dentro del array ItemPrices, lo que hace es devolver el objeto cuyo PriceList es igual a lo que le pasamos en la variable lista, al final agregamos el .Price para que de ese objeto solo nos devuelva su Price.

2
  • Gracias! Me sirvio el 21 dic. 2021 a las 19:42
  • Favor si logró resolver tu necesidad, marcar la solución como correcta dándole al visto al costado de la respuesta, y flecha arriba para votación, esto ayudará a otros usuarios a saber rápidamente que es una respuesta útil y aplicarla en sus necesidades. Gracias. el 21 dic. 2021 a las 19:46
0

Como bien dices, la complejidad esta en que existe un array dentro de los objetos.

Esto debería bastar

{data.map((item, index) => (
  <React.Fragment key={index}>
    <p><b>Code:</b> {item.ItemCode}</p>
    <p><b>Name:</b> {item.ItemName}</p>
    <p><b>Precios:</b> {item.ItemPrices.map(price => price.Price).join(' | ')}</p>
  </React.Fragment>
))}

Como la propiedad de ItemPrices es un array, también debes recorrerla :)

Ahora, si deseas listar sólo un precio, con la función find, puedes lograrlo

{item.ItemPrices.find(price => price.PriceList === 2).Price}

De esta forma, te lista sólo el Price con PriceList igual a 2

Cualquier duda nos comentas.

2
  • Gracias. En el caso que solo quisiera ver un precio en especifico como tendria que hacer? Me sirve pero me está listando todos los precios el 21 dic. 2021 a las 19:42
  • @LucasLopez Editada! el 21 dic. 2021 a las 19:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.