This is my first ajax experience. I have successfully got the GET response from server using ajax. But I am facing problem to retrieve the value from the JSON.
My ajax call:
url: "ur",
type: "GET",
cache: false,
dataType:"json",
contentType: "application/json",
success: function(res) {
console.log(res);
}
JSON response from the server:
{
"message": [
{
"files": "SS",
"messageBody": "gOOD",
"messageID": 1,
"messageTitle": "THTH",
"photos": "DD",
"userID": 2,
"videos": "FF"
},
{
"files": "",
"messageBody": "bla bala blaa",
"messageID": 2,
"messageTitle": "another",
"photos": "",
"userID": 3,
"videos": ""
},
{
"files": "The Cock files",
"messageBody": "New message 11 Body",
"messageID": 3,
"messageTitle": "New message 11 Title",
"photos": "The Cock photos",
"userID": 3,
"videos": "The Cock videos"
}
]
}
I can able to print the JSON object in the console. But the problem is retrieving the content from JSON. I have tried in many ways to retrieve the value from the JSON object. Any help will be appreciable.
[Note: I am very very new comer in Ajax. Please do not mark as duplicate.]
var res= { "message": [ { "files": "SS", "messageBody": "gOOD", "messageID": 1, "messageTitle": "THTH", "photos": "DD", "userID": 2, "videos": "FF" }, { "files": "", "messageBody": "bla bala blaa", "messageID": 2, "messageTitle": "another", "photos": "", "userID": 3, "videos": "" }, { "files": "The Cock files", "messageBody": "New message 11 Body", "messageID": 3, "messageTitle": "New message 11 Title", "photos": "The Cock photos", "userID": 3, "videos": "The Cock videos" } ] } $.each(res.message, function(index,value){ console.log(value.files) console.log(value.messageBody) console.log(value.messageID) $('body').append(value.files +"<br>" + value.messageBody +"<br>" + value.messageID +"<hr>"); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Try it this way.
Do it like this:
var x = {
"message": [
{
"files": "SS",
"messageBody": "gOOD",
"messageID": 1,
"messageTitle": "THTH",
"photos": "DD",
"userID": 2,
"videos": "FF"
},
{
"files": "",
"messageBody": "bla bala blaa",
"messageID": 2,
"messageTitle": "another",
"photos": "",
"userID": 3,
"videos": ""
},
{
"files": "The Cock files",
"messageBody": "New message 11 Body",
"messageID": 3,
"messageTitle": "New message 11 Title",
"photos": "The Cock photos",
"userID": 3,
"videos": "The Cock videos"
}
]
};
And then you access your data, in this case, like this:
var z = x.message[0].files; // value of z is "SS"
Additional reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON
Update: In javascript, you get to number of elements in array by checking his length, like in this case: x.message.length;
So if you want to list all your data, you can do something like this:
for(var i = 0; i < x.message.length; i++) {
var tempUl = document.createElement('ul');
tempDiv.id = "object"+i;
// now you can do something like this
var tempLi = document.createElement('li');
tempLi.innerHTML = x.message[i].files; // or x.message[i]['files'];
tempUl.appendChild(tempLi);
// ... and so one ...
// or you can do it like this
for(var j = 0; j < Object.keys(x.message[i]).length; j++) {
var tempLi = document.createElement('li');
var tempVal = Object.keys(x.message[i])[j];
tempLi.className = tempVal; // if you need to sort it or access them by any other way... also you can use classList.add();
tempLi.innerHTML = x.message[i][tempVal];
tempUl.appendChild(tempLi);
}
}
...or something like that. That should generate un-ordered lists. I'm to tired to test it, sorry.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.