Parsing and Displaying JSON Data in Web App

Question

Ive been trying to parse and display the json data returned by a REST API without success.

Tested locally, the API is of form:

http://localhost/apiurl/get-data.php

And it returns data in form:

[{"title":"Title One","message":"Message One"},{"title":"title two","message":"message two"},....]

Each item consist of two elements ; title and message as shown above.

I want to loop through all returned items and display the result in a div like this

<p>Title One</p>
<p>Message One</p>

Etc.

Ive tried something like this:

<script src="path/to/jquery"></script> 

<script type="text/javascript">
 $(document).ready(function(){
var url="http://localhost/apiurl/get-data.php";
$.getJSON(url,function(json){
$.each(data,function(i,dat){
$("#resultid").append(
'<p>Title : <em>'+dat.title+'</em>'+
'<p>Message : <em>'+dat.message+'</em></p>'+
'<hr>'
);
});
});
});
</script>

but it didn't work. Any other idea?

Are you getting any errors in your JS console? Also, try logging the json variable after you get it. Does it contain the data you want? — John Ellmore
– John Ellmore, Commented Nov 9, 2017 at 19:06
Change $.getJSON(url,function(json) to $.getJSON(url,function(data) — Dipen Shah
– Dipen Shah, Commented Nov 9, 2017 at 19:07

Ampati Hareesh · Accepted Answer · 2017-11-09 19:14:45Z

1

it started working after changing the value to json instead of data check this out

answered Nov 9, 2017 at 19:14

Ampati Hareesh

1,8721 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ampati Hareesh Over a year ago

Passing variable and accessing variable names should be same!!

bodesam Over a year ago

Yes. It works, even with json. But I had to remove all html tags first from the url file...<html>, <head>, <body>, seems that was the cause the cause of the problem. Thanks

Collectives™ on Stack Overflow

Parsing and Displaying JSON Data in Web App

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related