Display JSON data from API result in DOM
0
Hi I have created an api request to a web application. I am able to retrieve the data successfully although when I try to display individual parts of the JSON data in the dom I get undefined. I have listed my code below.
//initial API call
var request = new XMLHttpRequest();
request.open('GET', apiUrl + apiRequest + apiCredential + apiParameter + apiFilter, true);
request.onload = function ()
//accessing JSON data
data = this.response;
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
request.send();
json rest dom xmlhttprequest
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
add a comment |
0
Hi I have created an api request to a web application. I am able to retrieve the data successfully although when I try to display individual parts of the JSON data in the dom I get undefined. I have listed my code below.
//initial API call
var request = new XMLHttpRequest();
request.open('GET', apiUrl + apiRequest + apiCredential + apiParameter + apiFilter, true);
request.onload = function ()
//accessing JSON data
data = this.response;
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
request.send();
json rest dom xmlhttprequest
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
add a comment |
0
0
0
Hi I have created an api request to a web application. I am able to retrieve the data successfully although when I try to display individual parts of the JSON data in the dom I get undefined. I have listed my code below.
//initial API call
var request = new XMLHttpRequest();
request.open('GET', apiUrl + apiRequest + apiCredential + apiParameter + apiFilter, true);
request.onload = function ()
//accessing JSON data
data = this.response;
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
request.send();
json rest dom xmlhttprequest
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
Hi I have created an api request to a web application. I am able to retrieve the data successfully although when I try to display individual parts of the JSON data in the dom I get undefined. I have listed my code below.
//initial API call
var request = new XMLHttpRequest();
request.open('GET', apiUrl + apiRequest + apiCredential + apiParameter + apiFilter, true);
request.onload = function ()
//accessing JSON data
data = this.response;
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
request.send();
json rest dom xmlhttprequest
json rest dom xmlhttprequest
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
asked Nov 12 '18 at 15:04
shaminder gallashaminder galla
55
55
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
First and foremost, JSON is a string. And strings don't have a CreatedBy property.
In order to get a data structure out of that string, you must parse it:
//accessing JSON data
data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
Note that JSON.parse() can throw an error. You might want to enclose that section in a try/catch block.
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
JSONis only a string in this particular case, not in general, which might confuse the OP
– vsync
Nov 13 '18 at 8:12
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264893%2fdisplay-json-data-from-api-result-in-dom%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
First and foremost, JSON is a string. And strings don't have a CreatedBy property.
In order to get a data structure out of that string, you must parse it:
//accessing JSON data
data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
Note that JSON.parse() can throw an error. You might want to enclose that section in a try/catch block.
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
JSONis only a string in this particular case, not in general, which might confuse the OP
– vsync
Nov 13 '18 at 8:12
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
|
show 5 more comments
1
First and foremost, JSON is a string. And strings don't have a CreatedBy property.
In order to get a data structure out of that string, you must parse it:
//accessing JSON data
data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
Note that JSON.parse() can throw an error. You might want to enclose that section in a try/catch block.
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
JSONis only a string in this particular case, not in general, which might confuse the OP
– vsync
Nov 13 '18 at 8:12
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
|
show 5 more comments
1
1
1
First and foremost, JSON is a string. And strings don't have a CreatedBy property.
In order to get a data structure out of that string, you must parse it:
//accessing JSON data
data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
Note that JSON.parse() can throw an error. You might want to enclose that section in a try/catch block.
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
First and foremost, JSON is a string. And strings don't have a CreatedBy property.
In order to get a data structure out of that string, you must parse it:
//accessing JSON data
data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400)
document.getElementById('test').innerHTML = data.CreatedBy;
Note that JSON.parse() can throw an error. You might want to enclose that section in a try/catch block.
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
answered Nov 12 '18 at 15:13
TomalakTomalak
259k52430547
259k52430547
JSONis only a string in this particular case, not in general, which might confuse the OP
– vsync
Nov 13 '18 at 8:12
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
|
show 5 more comments
JSONis only a string in this particular case, not in general, which might confuse the OP
– vsync
Nov 13 '18 at 8:12
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
JSON is only a string in this particular case, not in general, which might confuse the OP– vsync
Nov 13 '18 at 8:12
JSON is only a string in this particular case, not in general, which might confuse the OP– vsync
Nov 13 '18 at 8:12
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
@vsync Wrong (but sadly an extremely common misconception). JSON is a string always.
– Tomalak
Nov 13 '18 at 8:52
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
Why do you say that? is XML also a string? I've Googled now but couldn't find a concrete information to this statement
– vsync
Nov 13 '18 at 9:00
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
You are not making a difference between what it is and what it represents. JSON is a string that represents an object/array/whatever. It's the serialized form of an object. It is not an object itself. Only after parsing the string you will get an object, and then it's not JSON anymore. JSON always is a string, and an object never is JSON.
– Tomalak
Nov 13 '18 at 9:18
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
Who knew. After a decade and a half of doing JS I randomly discover in a Stackoverflow comment a JSON definition is a String.
– vsync
Nov 13 '18 at 9:29
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264893%2fdisplay-json-data-from-api-result-in-dom%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
