Se pueden usar JSON en blogger usando javascript?

  • Autor Autor chobo3
  • Fecha de inicio Fecha de inicio
chobo3

chobo3

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Hola betas como dice el titulo, se pueden mostrar el contenido un archivo JSON en blogger usando javascript?
 
Ordenar por fecha Ordenar por votos
Pues claro que si, puedes enlazar el archivo json desde donde lo tengas alojado o tenerlo adentro de las etiquetas de javascript en una variable.
 
Voto positivo 0
Claro
 
Voto positivo 0
chobo3 dijo:
por ejemplo tengo una lista en JSON de frutas.. y quiero que esa lista se muestre en una entrada de bloguer como lo haria?🙏
Hacer clic para expandir...
Dentro de un <script> invocas la lista
 
Voto positivo 0
chobo3 dijo:
ya lo hasta con chatgpt y nada...
me dice que suba al json a google drive y da un script y todo, y al publicar la entrada. no sale sale nada.
Hacer clic para expandir...
De donde sacas el json?
 
Voto positivo 0
moiseseccam dijo:
De donde sacas el json?
Hacer clic para expandir...
segun chatgpt es :

Claro, puedo ayudarte con eso. Aquí tienes un ejemplo de un archivo JSON que contiene una lista de 5 frutas:

json
Copy code
{
"frutas": [
{
"nombre": "Manzana",
"color": "Rojo",
"sabor": "Dulce"
},
{
"nombre": "Plátano",
"color": "Amarillo",
"sabor": "Dulce"
},
{
"nombre": "Uva",
"color": "Morado",
"sabor": "Dulce"
},
{
"nombre": "Naranja",
"color": "Naranja",
"sabor": "Cítrico"
},
{
"nombre": "Fresa",
"color": "Rojo",
"sabor": "Dulce"
}
]
}

Lo que hago es copiar y pegar en bloc de notas y guardarlo como archivo JSON. luego lo subo al google drive
 
Voto positivo 0
chobo3 dijo:
segun chatgpt es :

Claro, puedo ayudarte con eso. Aquí tienes un ejemplo de un archivo JSON que contiene una lista de 5 frutas:

json
Copy code
{
"frutas": [
{
"nombre": "Manzana",
"color": "Rojo",
"sabor": "Dulce"
},
{
"nombre": "Plátano",
"color": "Amarillo",
"sabor": "Dulce"
},
{
"nombre": "Uva",
"color": "Morado",
"sabor": "Dulce"
},
{
"nombre": "Naranja",
"color": "Naranja",
"sabor": "Cítrico"
},
{
"nombre": "Fresa",
"color": "Rojo",
"sabor": "Dulce"
}
]
}

Lo que hago es copiar y pegar en bloc de notas y guardarlo como archivo JSON. luego lo subo al google drive
Hacer clic para expandir...

HTML: 
  <div id="frutasContainer"></div>

  <script>
    // El JSON con la información de las frutas
    const frutasJSON = {
      "frutas": [
        {
          "nombre": "Manzana",
          "color": "Rojo",
          "sabor": "Dulce"
        },
        {
          "nombre": "Plátano",
          "color": "Amarillo",
          "sabor": "Dulce"
        },
        {
          "nombre": "Uva",
          "color": "Morado",
          "sabor": "Dulce"
        },
        {
          "nombre": "Naranja",
          "color": "Naranja",
          "sabor": "Cítrico"
        },
        {
          "nombre": "Fresa",
          "color": "Rojo",
          "sabor": "Dulce"
        }
      ]
    };

    const frutasContainer = document.getElementById('frutasContainer');

    // Iterar sobre cada fruta y crear un div para mostrar el nombre de la fruta
    frutasJSON.frutas.forEach(fruta => {
      const divFruta = document.createElement('div');
      divFruta.textContent = fruta.nombre;
      frutasContainer.appendChild(divFruta);
    });
  </script>
 
Voto positivo 0
pues eso si lo hice al principio con chatgpt..
gracias por tu respuesta.
que pasaria si tuviera una lista de 1000000 palabras

por eso quiero subir el JSON a la nube.. y luego mostrar ese JSON en una entrada de blogger.(por ejemplo)
 
Voto positivo 0
chobo3 dijo:
pues eso si lo hice al principio con chatgpt..
gracias por tu respuesta.
que pasaria si tuviera una lista de 1000000 palabras

por eso quiero subir el JSON a la nube.. y luego mostrar ese JSON en una entrada de blogger.(por ejemplo)
Hacer clic para expandir...
Tienes que hacer un fetch, y cuando recibas la respuesta recién crear la tabla

developer.mozilla.org

Uso de Fetch - Referencia de la API Web | MDN

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.
developer.mozilla.org developer.mozilla.org
 
Voto positivo 0
chobo3 dijo:
pues eso si lo hice al principio con chatgpt..
gracias por tu respuesta.
que pasaria si tuviera una lista de 1000000 palabras

por eso quiero subir el JSON a la nube.. y luego mostrar ese JSON en una entrada de blogger.(por ejemplo)
Hacer clic para expandir...
HTML: 
  <div id="frutasContainer"></div>

  <script>
    const frutasContainer = document.getElementById('frutasContainer');

    // Hacer la solicitud para obtener el JSON desde una URL externa
    fetch('URL_DE_TU_JSON') // Reemplaza 'URL_DE_TU_JSON' con la URL real del JSON
      .then(response => response.json())
      .then(frutasJSON => {
        // Iterar sobre cada fruta y crear un div para mostrar el nombre de la fruta
        frutasJSON.frutas.forEach(fruta => {
          const divFruta = document.createElement('div');
          divFruta.textContent = fruta.nombre;
          frutasContainer.appendChild(divFruta);
        });
      })
      .catch(error => console.error('Error al obtener el JSON:', error));
  </script>
 
Voto positivo 1
moiseseccam dijo:
Tienes que hacer un fetch, y cuando recibas la respuesta recién crear la tabla

developer.mozilla.org

Uso de Fetch - Referencia de la API Web | MDN

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.
developer.mozilla.org developer.mozilla.org
Hacer clic para expandir...
F por mi... nunca logre entender esas guias.. en donde se ponen, como se usan.
Bueno, de todos modos muchas gracias por tu respuesta.
 
Voto positivo 0
chobo3 dijo:
F por mi... nunca logre entender esas guias.. en donde se ponen, como se usan.
Bueno, de todos modos muchas gracias por tu respuesta.
Hacer clic para expandir...
Te deje un ejemplo donde solo tienes que colocar la url de tu archivo json subido
 
Voto positivo 0
Elegant dijo:
HTML: 
  <div id="frutasContainer"></div>

  <script>
    const frutasContainer = document.getElementById('frutasContainer');

    // Hacer la solicitud para obtener el JSON desde una URL externa
    fetch('URL_DE_TU_JSON') // Reemplaza 'URL_DE_TU_JSON' con la URL real del JSON
      .then(response => response.json())
      .then(frutasJSON => {
        // Iterar sobre cada fruta y crear un div para mostrar el nombre de la fruta
        frutasJSON.frutas.forEach(fruta => {
          const divFruta = document.createElement('div');
          divFruta.textContent = fruta.nombre;
          frutasContainer.appendChild(divFruta);
        });
      })
      .catch(error => console.error('Error al obtener el JSON:', error));
  </script>
Hacer clic para expandir...
Perdon bro, no me fije tu mensaje. agradezco tu respuesta
al poner mi link:de mi JSON:
Hacer clic para expandir...
 
Voto positivo 0
chobo3 dijo:
Perdon bro, no me fije tu mensaje. agradezco tu respuesta
al poner mi link:de mi JSON:
Hacer clic para expandir...


No uses Google Drive, probablemente tendrás problemas de CORS

Usa un link directo normal
 
Voto positivo 0
Jsonbin tambien lo veo como una opcion viable
 
Voto positivo 0
Elegant dijo:
Utiliza github
Hacer clic para expandir...
mi codigo quedaria asi:

Insertar CODE, HTML o PHP: 
  <div id="frutasContainer"></div>

  <script>
    const frutasContainer = document.getElementById('frutasContainer');

    // Hacer la solicitud para obtener el JSON desde una URL externa
    fetch('https://github.com/chobo3/tra/blob/main/translations.json.json') // Reemplaza 'URL_DE_TU_JSON' con la URL real del JSON
      .then(response => response.json())
      .then(frutasJSON => {
        // Iterar sobre cada fruta y crear un div para mostrar el nombre de la fruta
        frutasJSON.frutas.forEach(fruta => {
          const divFruta = document.createElement('div');
          divFruta.textContent = fruta.nombre;
          frutasContainer.appendChild(divFruta);
        });
      })
      .catch(error => console.error('Error al obtener el JSON:', error));
  </script>
y al publicar la entrada de blogger no se muestra nada. :/
 
Voto positivo 0
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba