0

Quiero tomar todos los datos que tengo de ese .json que esta en un archivo externo, luego traerlo a javascript y luego para cada elemento del json tenerlo como:

<a href="_link_">
    <img src="_img_" title="_name_">
</a>

Eso por cada elemento del json y como hay dos propiedades ("leaderboard", "medium") hacer eso para ambas.

Este es el .json que genere desde php con json_encode()

{
    "leaderboard": [
        {
            "name": "example1",
            "link": "https:\/\/example1\/?r=035b7500",
            "img": "http:\/\/example1\/img\/leaderboard.png"
        },
        {
            "name": "example2",
            "link": "https:\/\/www.example2.com\/?r=Shair17",
            "img": "https:\/\/www.example2.com\/uploads\/728X90.gif"
        },
        {
            "name": "adbtc",
            "link": "https:\/\/www.example3.com\/787707",
            "img": "https:\/\/example3.com\/promo\/banner_728x90.png"
        },
        {
            "name": "example4",
            "link": "http:\/\/example4.com\/r\/p1KGB",
            "img": "https:\/\/example4.com\/img\/promo\/banners\/3_728x90.gif"
        },
        {
            "name": "example5",
            "link": "https:\/\/example5.com\/r\/12944",
            "img": "https:\/\/example5.com\/storage\/images\/tools\/small.jpg"
        }
    ],
    "medium": [
        {
            "name": "example1",
            "link": "https:\/\/example1.com\/?r=035b7500",
            "img": "http:\/\/example1.com\/img\/rectangle.png"
        },
        {
            "name": "example2",
            "link": "https:\/\/www.example2.com\/?r=Shair17",
            "img": "https:\/\/www.example2.com\/uploads\/300X250.gif"
        },
        {
            "name": "example3",
            "link": "https:\/\/example3.com\/787707",
            "img": "https:\/\/example3.com\/promo\/banner_250x250.png"
        },
        {
            "name": "example4",
            "link": "http:\/\/example4.com\/r\/p1KGB",
            "img": "https:\/\/example4.com\/img\/promo\/banners\/3_300x250.gif"
        },
        {
            "name": "example5",
            "link": "https:\/\/example5.com\/r\/12944",
            "img": "https:\/\/example5.com\/storage\/images\/tools\/square.jpg"
        }
    ]
}

Lo que quiero obtener es que del json obtener todos los datos y ponerlo en las etiquetas html y luego ya con otra función pintarlos en pantalla aleatoriamente dependiendo de que si pongo leaderboard o medium y solo que muestre uno.

1
  • 1
    ¿Podrías especificar qué es lo que necesitas? Imagino tienes hecha la opción de los datos del JSON externo (si no es así dínoslo) y que solo te queda mostrar un dato aleatorio, pero no nos indicas dónde quieres mostrarlo ni cómo o dónde vas a llamar a la función (en el evento de carga del documento, al pulsar un botón, etc). Sea como sea, se puede implementar como una función, pero necesito más información para saber cómo debe ser esa función y qué parámetros debe llevar. Commented el 28 oct. 2019 a las 8:22

3 respuestas 3

2

Lo ideal es mantener el JSON en memoria y no crear un objeto en el DOM por cada valor del JSON. Sería un desperdicio de memoria ya que únicamente parece que vas a mostrar un reducido número de ellos.

Para reproducir tu problema voy a suponer que quieres tener en la página dos imágenes con su enlace (uno para cada tipo):

/* Función que obtiene un valor aleatorio de una matriz */
let valor_aleatorio =
  elementos => elementos[Math.floor(Math.random() * elementos.length)];

/* Cuando cargue el documento y el DOM haya sido generado*/
document.addEventListener("DOMContentLoaded", e => {
  /* Mostramos un valor aleatorio de cada tipo */
  let leaderboard = valor_aleatorio(datos.leaderboard);
  console.log('Leaderboard seleccionado:', leaderboard);
  let medium = valor_aleatorio(datos.medium);
  console.log('Medium seleccionado:', medium);
  /* Obtenemos los nodos del DOM de los enlaces */
  let enlace_leaderboard = document.getElementById('enlace_leaderboard');
  let enlace_medium = document.getElementById('enlace_medium');
  /* Asignamos los enlaces */
  enlace_leaderboard.href = leaderboard.link;
  enlace_medium.href = medium.link;
  /* Obtenemos los nodos del DOM de las imágenes */
  let imagen_leaderboard = document.getElementById('imagen_leaderboard');
  let imagen_medium = document.getElementById('imagen_medium');
  /* Asignamos los datos de imagen y texto */
  imagen_leaderboard.src = leaderboard.img;
  imagen_leaderboard.title = leaderboard.name;
  imagen_medium.src = medium.img;
  imagen_medium.title = medium.name;
});

/* Presupongo datos ya cargados y en memoria */
let datos = {
    "leaderboard": [
        {
            "name": "example1",
            "link": "https:\/\/example1\/?r=035b7500",
            "img": "http:\/\/example1\/img\/leaderboard.png"
        },
        {
            "name": "example2",
            "link": "https:\/\/www.example2.com\/?r=Shair17",
            "img": "https:\/\/www.example2.com\/uploads\/728X90.gif"
        },
        {
            "name": "adbtc",
            "link": "https:\/\/www.example3.com\/787707",
            "img": "https:\/\/example3.com\/promo\/banner_728x90.png"
        },
        {
            "name": "example4",
            "link": "http:\/\/example4.com\/r\/p1KGB",
            "img": "https:\/\/example4.com\/img\/promo\/banners\/3_728x90.gif"
        },
        {
            "name": "example5",
            "link": "https:\/\/example5.com\/r\/12944",
            "img": "https:\/\/example5.com\/storage\/images\/tools\/small.jpg"
        }
    ],
    "medium": [
        {
            "name": "example1",
            "link": "https:\/\/example1.com\/?r=035b7500",
            "img": "http:\/\/example1.com\/img\/rectangle.png"
        },
        {
            "name": "example2",
            "link": "https:\/\/www.example2.com\/?r=Shair17",
            "img": "https:\/\/www.example2.com\/uploads\/300X250.gif"
        },
        {
            "name": "example3",
            "link": "https:\/\/example3.com\/787707",
            "img": "https:\/\/example3.com\/promo\/banner_250x250.png"
        },
        {
            "name": "example4",
            "link": "http:\/\/example4.com\/r\/p1KGB",
            "img": "https:\/\/example4.com\/img\/promo\/banners\/3_300x250.gif"
        },
        {
            "name": "example5",
            "link": "https:\/\/example5.com\/r\/12944",
            "img": "https:\/\/example5.com\/storage\/images\/tools\/square.jpg"
        }
    ]
};
<a href="_link_" id="enlace_leaderboard">
    <img src="_img_" title="_name_" id="imagen_leaderboard" />
</a>
<hr/>
<a href="_link_" id="enlace_medium">
    <img src="_img_" title="_name_" id="imagen_medium" />
</a>

1

Si quieres agregar este código

<a href="_link_">
    <img src="_img_" title="_name_">
</a>

para cada uno de los elementos te recomiendo que lo agregues desde Javascript haciendo los respectivos forEach tanto para leaderboard y medium de esta manera:

    datos.medium.forEach( (i) => {
        document.getElementById('medium').innerHTML += ` 
            <br> 
            <a href="${i.link}"> 
                <img src="${i.img}" title="${i.name}"> 
            </a> `;
    });


    datos.leaderboard.forEach( (i) => {
        document.getElementById('leaderboard').innerHTML += ` 
            <br> 
            <a href="${i.link}"> 
                <img src="${i.img}" title="${i.name}"> 
            </a> `;
    });

Imaginando que tienes

<div id="médium" ></>
<div id="leaderboard" ></>

La idea simplemente es recorrerlos y agregarlos dentro de sus respectivos contenedores....

Espero te sirva este ejemplo.... Mucha suerte

0
0

Si usaras Jquery la forma de hacerlo seria:

var $arrayarecorrer=arrayQueTieneDatos;

$.each($arrayarecorrer,function(index,valor)
{
  valor->name;
  valor->link;
  valor->img
});

Manipulas el DOM de la(s) etiqueta(s) HTML dentro del $.each y le asignas los valores.

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.