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

Question

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

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

3

I want to extract the data from this json by Javascript and HTML what I need is to show the data "ID" y "NAME" link

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

javascript html

asked by Guillexd 13.04.2017 в 02:54

source

3 answers

Objecto undefined Register with output variable using ASP.Net and SQL Server

score 3 · Answer 1

The following example shows you how to do for:

1.- Access the values of a JSON Object if you know its structure.
2.- Access the values of a JSON Object if NO its structure is known.
3.- Get 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>

score 0 · Answer 2

to access the attributes of json, use the point . 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>

score 0 · Answer 3

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>