How to modify a Json object (javascript)?

Question

How to modify a Json object (javascript)?

Asked 8 years, 10 months ago

Viewed 1,125 times

2

I need to change a json object that I am receiving. I would like to insert a data input into this Json. The idea is simple put a dice, it pulls the json according to this data, but I need to change the json with that same data. I need to change the johnner on apiGet! Follows Code:

<!DOCTYPE html>
<html>
<body>
<h1>Meu Projeto</h1>
<div id="id01"></div>
Nome: <input type="text" id="nome" value="johnner">

<p>Click the button to change the value of the text field.</p>

<button onclick="teste()">Try it</button>
<p id="saida">aqui</p>

<script>

function teste() {
    	var x = document.getElementById("nome").value;
	var xmlhttp = new XMLHttpRequest();
	var url = "https://na.api.pvp.net/api/lol/br/v1.4/summoner/by-name/" + 
	x + "?api_key=a15c56d1-fdd7-4da2-ad9c-0f1a6585ac1b";

	xmlhttp.onreadystatechange=function() {
 	   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        apiGet(xmlhttp.responseText);
	    	}
	}
	xmlhttp.open("GET", url, true);
	xmlhttp.send();
}

function apiGet(response) {
    var XX = JSON.parse(response);
    var arr = XX.johnner;
    var out = "<h1>";
    out += arr.id + arr.name + arr.summonerLevel;
    out += "</h1>";
    document.getElementById("id01").innerHTML = out;
}

function getImput() {
    var x = document.getElementById("nome").value;
document.getElementById("saida").innerHTML = x;
}

</script>
</body>
</html>

I need to change/access Json for this part: var arr = XX.johnner; using the same name that was passed in the ajax url.

AJAX returns this:

{"johnner":{"id":1111,"name":"Johnner","profileIconId":111,"summonerLevel":11,"revisionDate":1111111111}}

1 answer

Browser other questions tagged javascript html json

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2015-12-04T09:44:22+00:00

What you need is to use the variable x within the function apiGet to access the property of the object dynamically, that is to say with straight parentheses [].

I suggest you change the code as in the example below, which summarizing has these two changes:

flame apiGet passing also x as a parameter
uses var arr = XX[x]; thus accessing the property with the string you passed

Javascript

function teste() {
  var x = document.getElementById("nome").value;
  var xmlhttp = new XMLHttpRequest();
  var url = "https://na.api.pvp.net/api/lol/br/v1.4/summoner/by-name/" +
    x + "?api_key=a15c56d1-fdd7-4da2-ad9c-0f1a6585ac1b";

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      apiGet(xmlhttp.responseText, x);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

function apiGet(response, nome) {
  var XX = JSON.parse(response);
  var obj = XX[nome];
  var out = "<h1>";
  out += obj.id + obj.name + obj.summonerLevel;
  out += "</h1>";
  document.getElementById("id01").innerHTML = out;
}

Note: I changed the code too var arr for var obj since JSON gives you an object and not an array. This is more correct for those who read the code (semantically).