Ajax retrieve value from json object ()

Question

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.]

guradio · Accepted Answer · 2015-11-25 02:29:57Z

3

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.

answered Nov 25, 2015 at 2:29

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

3 Comments

guradio Over a year ago

you can do the rest by changing the names

user1365169 Over a year ago

Thanks guradio. It works now. I am new in ajax as well as JavaScript. But I am enjoying.

guradio Over a year ago

@user1365169 glad to help mate.happy coding

Bozidar Sikanjic · Accepted Answer · 2015-11-25 03:55:53Z

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.

I think the previous answer is more accurate. Your one is also works. But you don't know the number of elements in the array.

Collectives™ on Stack Overflow

Ajax retrieve value from json object ()

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related