É possível usar JSON no blogger usando javascript?

chobo3 · 06/12/2023

Hola betas como dice el titulo, se pueden mostrar el contenido un archivo JSON en blogger usando javascript?

Elegant · 06/12/2023

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.

moiseseccam · 06/12/2023

Claro

chobo3 · 06/12/2023

Elegant disse:
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.

moiseseccam disse:
Claro

por ejemplo tengo una lista en JSON de frutas.. y quiero que esa lista se muestre en una entrada de bloguer como lo haria?🙏

moiseseccam · 06/12/2023

chobo3 disse:
por ejemplo tengo una lista en JSON de frutas.. y quiero que esa lista se muestre en una entrada de bloguer como lo haria?🙏

Dentro de un <script> invocas la lista

chobo3 · 06/12/2023

moiseseccam disse:
Dentro de un <script> invocas la lista

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.

moiseseccam · 06/12/2023

chobo3 disse:
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.

De donde sacas el json?

chobo3 · 06/12/2023

moiseseccam disse:
De donde sacas el json?

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

Elegant · 06/12/2023

chobo3 disse:
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

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>

chobo3 · 06/12/2023

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)

moiseseccam · 06/12/2023

chobo3 disse:
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)

Tienes que hacer un fetch, y cuando recibas la respuesta recién crear la tabla

Uso de Fetch - 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

Elegant · 06/12/2023

chobo3 disse:
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)

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>

chobo3 · 06/12/2023

moiseseccam disse:
Tienes que hacer un fetch, y cuando recibas la respuesta recién crear la tabla

Uso de Fetch - 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

F por mi... nunca logre entender esas guias.. en donde se ponen, como se usan.
Bueno, de todos modos muchas gracias por tu respuesta.

Elegant · 06/12/2023

chobo3 disse:
F por mi... nunca logre entender esas guias.. en donde se ponen, como se usan.
Bueno, de todos modos muchas gracias por tu respuesta.

Te deje un ejemplo donde solo tienes que colocar la url de tu archivo json subido

chobo3 · 06/12/2023

Elegant disse:

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>

Perdon bro, no me fije tu mensaje. agradezco tu respuesta

al poner mi link:de mi JSON:

moiseseccam · 06/12/2023

chobo3 disse:
Perdon bro, no me fije tu mensaje. agradezco tu respuesta
al poner mi link:de mi JSON:

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

Usa un link directo normal

chobo3 · 06/12/2023

cual me recomiendas bro.. mega?

Elegant · 06/12/2023

chobo3 disse:
cual me recomiendas bro.. mega?

Utiliza github

Elegant · 06/12/2023

Jsonbin tambien lo veo como una opcion viable

chobo3 · 06/12/2023

Elegant disse:
Utiliza github

mi codigo quedaria asi:

Inserir CODE, HTML ou 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. :/

É possível usar JSON no blogger usando javascript?

chobo3

Elegant

moiseseccam

chobo3

moiseseccam

chobo3

moiseseccam

chobo3

Elegant

chobo3

moiseseccam

Uso de Fetch - API web | MDN

Elegant

chobo3

Uso de Fetch - API web | MDN

Elegant

chobo3

moiseseccam

chobo3

Elegant

Elegant

chobo3

Tópicos similares