3 votes

How can I extract the data in this JSON using javascript and html?

I want to extract the data from this json by Javascript and HTML what I need is to show the data "ID" y "NAME" https://pastebin.com / raw / 45M08KT7

     {
      "mohademago": {
        "id": 4294825,
        "name": "mohademago",
        "profileIconId": 1594,
        "revisionDate": 1491930966000,
        "summonerLevel": 30
      }
    }
 

3voto

fwBasic Points 2495

The following example shows you how to:

1.- To access the values of a JSON Object if you know its structure.
2.- To access the values of a JSON Object if NOT you know its structure.
3.- Obtain the data from a GET request (via XMLHttpRequest)
(This only works if the request is made to the same server)

obj = {
      "mohademago": {
        "id": 4294825,
        "name": "mohademago",
        "profileIconId": 1594,
        "revisionDate": 1491930966000,
        "summonerLevel": 30
      }
    };

html.innerHTML+="\
1.- Acceder a los valores de un objeto JSON si conoces su estructura"
html.innerHTML+="<p>id="+obj.mohademago.id;
html.innerHTML+="<p>name="+obj.mohademago.name;

html.innerHTML+="\
2.- Acceder a los valores de un objeto JSON si NO conoces su estructura"
display(obj,"");

function display(obj,sp) {
 for (n in obj) {
  if (typeof obj[n] == 'object') {
   display(obj[n],n+".");
  }else{
   html.innerHTML+="<p>"+sp+n+"="+obj[n];
  }
 }
}

html.innerHTML+="\
3.- Obtener los datos desde una petición GET (via XMLHttpRequest)\
(Esto solo funciona si la solicitud se hace al mismo servidor)"
var req = new XMLHttpRequest();
req.open('GET', 'https://pastebin.com/raw/45M08KT7', true); 
req.onreadystatechange = function () {
 if (req.readyState == 4)
  if  (req.status == 200) {
   obj = JSON.parse(req.responseText);
   display(obj,"");
  } else {
   html.innerHTML+="<p>error "+req.status;
 }
};
req.send(null);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="html"></div>

0voto

x-rw Points 5070

to access the attributes of json, use the dot . followed by the attribute, example: datos.mahademago and return a list

 var datos={
      "mohademago": {
        "id": 4294825,
        "name": "mohademago",
        "profileIconId": 1594,
        "revisionDate": 1491930966000,
        "summonerLevel": 30
      }
    };
    
var div=document.getElementById("show");
div.innerHTML=datos.mohademago.id+" "+datos.mohademago.name; 
 <div id="show"></div> 

0voto

var Datos={
      "DatosPersonales": {
        "dni": 70798811,
        "nombre": "Pajaroman",
        "edad": 20,
      }
    };


 $("#dni").html(Datos.DatosPersonales.dni);
 $("#nombre").html(Datos.DatosPersonales.nombre);       $("#edad").html(Datos.DatosPersonales.edad);
 //O de esta foma tambien
 console.log(Datos);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dni"></div>
<div id="nombre"></div>
<div id="edad"></div>

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X