0

soy muy nuevo en esto y estoy haciendo un ejercicio que consiste en traer un dato de acuerdo a la la opción seleccionada, les comparto lo que tengo para ver si me pueden ayudar a saber como traigo solo un elemento y no todo el Json.

function aliadoSelect(data) {

	$.each(data, function(i, item) {
		console.log (item.imgBanner);
		console.log (" ");
		console.log (item.offers.offersOne);
		console.log (item.offers.offersTwo);
		console.log (item.offers.offersThree);
		console.log (item.offers.offersFour);
		console.log (" ");
		console.log (item.howToUse);
		console.log (" ");
		console.log (item.date);
		console.log (" ");
		console.log (item.terms);

		console.log ("============");
	});
}


function aliados(dataAliados) {
	$.each(dataAliados, function(i, itemAliados) {
		$( ".aliados" ).append( "<div class='containerAliados' id="+itemAliados.idAliado+"><p>"+itemAliados.imgLogo+"</p></div>" );
	});

$(".containerAliados").click(function(event){ 
		aliadoSeleccionado = $(this).attr('id');
		console.log (aliadoSeleccionado);
		$.getJSON('aliados.json', null, function(data) {
			aliadoSelect(data);
		});
	}); 
}

$(document).ready(function() { 

	$.getJSON('aliados.json', null, function(dataAliados) {
			aliados(dataAliados);
		});


}); 
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Somos EPM</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
  <div class="aliados">
    
  </div>
  <h1 id="ver">Ver</h1>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Y este es el Json

[
{
    "idAliado": 0,
    "imgLogo": "App_Themes/aliados/pizza-doble-pizza/logo.png",
    "imgBanner": "App_Themes/aliados/pizza-doble-pizza/banner.jpg",
    "offers": {
        "offersOne":        "App_Themes/aliados/pizza-doble-pizza/oferta-1.jpg",
        "offersTwo":        "App_Themes/aliados/pizza-doble-pizza/oferta-2.jpg",
        "offersThree":  "App_Themes/aliados/pizza-doble-pizza/oferta-3.jpg",
        "offersFour":   "App_Themes/aliados/pizza-doble-pizza/oferta-4.jpg"
    },
    "howToUse": "Presenta tu documento de identidad o di el número a la hora de hacer tu pedido.",
    "date":         "Válido hasta el 31 de diciembre de 2019",
    "terms":        "Combo "
},
{
    "idAliado": 1,
    "imgLogo": "App_Themes/aliados/yom-yom/logo.png",
    "imgBanner": "App_Themes/aliados/yom-yom/banner.jpg",
    "offers": {
        "offersOne":        "App_Themes/aliados/yom-yom/oferta-1.jpg",
        "offersTwo":        "",
        "offersThree":  "",
        "offersFour":   ""
    },
    "howToUse": "Presenta tu documento de identidad",
    "date":         "Válido hasta el 31 de diciembre de 2019",
    "terms":        "* Aplican"
}
  ]

Ya consulte de varias formas pero no logro cumplir mi objetivo, que idea me pueden dar chicos?

Muchas gracias por la ayuda

1
  • Amigo usa la posición del indice que vas a mostar, ya que recorres con un foreach y tenes la variable "i" al momento de recorrer y hacer el .append mostra el dato así "itemAliados[i].idAliado". Exitos y avisa si funciona. Saludos.. Commented el 6 dic. 2019 a las 18:05

1 respuesta 1

1

Podrías tener sólo una función que rescate el dato mediante el id o cualquier propiedad que quieras de la siguiente forma

let data = []

$(document).ready(function() {
  $.ajax({
    url: 'https://api.jsonbin.io/b/5dea9b4ebc5ffd040094f47c',
    type : 'GET',
    dataType : 'json',
    success: result => {
      data = result
      $.each(result, (i, itemAliados) => {
            $( ".aliados" ).append(`<div class="containerAliados" id=${itemAliados.idAliado}><p onclick="detalles(${itemAliados.idAliado})">${itemAliados.imgLogo}</p></div>`);
        });
    },
    error: (err) => console.log(`error, ${err}`)
  })
})

const detalles = id => {
  const item = data.find(i => i.idAliado === id)
  console.log(`${JSON.stringify(item)}`)
}
<div class="aliados"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Para evitar llamar tantas veces al JSON, cree una variable global donde asignas el valor del resultado en la llamada.

Después simplemente llame a la función detalles mediante el id y use el método find propio de JavaScript para encontrar el elemento deseado.

Cualquier duda nos comentas!

2
  • Está perfecto!, solo tengo una pregunta y es por que imprime todo con commits, incluso el texto. Commented el 6 dic. 2019 a las 20:02
  • A que te refieres con eso? Commented el 6 dic. 2019 a las 23:53

Tu Respuesta

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

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