How to get JSON object inside an object which is inside JSON array

Question

I have JSON dump file of a chat. I need to extract it out and print it out into website. I am beginner so please help me.

I have JSON dump file of my slack workspace. I want to extract some key details from it. I want real_name which is inside user_profile object which is further inside array of JSON. How to extract it. Also how do I extract all the real_name values( I mean there are nested objects).PLease help me with this.

[
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "welcome",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }
]

PLease help me with ho do I get these values into HTML as well using JAVASCRIPT and ajax maybe?

Answer 1

Just iterate through JSON something like this. (Take care of null values)

var obj = [
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "welcome",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }
];


for (var i in obj)
{
     var type = obj[i].type;
     var source_team = obj[i].source_team;

     var user_profile = obj[i].user_profile;

     var real_name = user_profile.real_name;


    alert(source_team+" : "+real_name);

}

Answer 2

If I understand correct you want to extract list of real names. As you said you are using JavaScript. Assign the array to a variable lets say arr;

    var arr = [
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },......,
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }];

var list_real_name = arr.map((userObj)=>{
  return userObj['user_profile']['real_name'];
})

Answer 3

If you have the json on file(locally) or in remote,

following script will work

     <script>
            function fetchJSONFile(path, callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4) {
                if (httpRequest.status === 200) {
                    var data = JSON.parse(httpRequest.responseText);
                    if (callback) callback(data);
                }
            }
        };
        httpRequest.open('GET', path);
        httpRequest.send(); 
    }

    // this requests the file and executes a callback with the parsed result once
    //   it is available. You can give URL just in case you are provided with URL.

fetchJSONFile('test.json', function(data){
        // do something with your data
        console.log(data[0].user_profile.real_name);
    });
        </script>

Using Ajax

<script>
    $(document).ready(function(){
        $.ajax({
    url: 'test.json',
    type: "GET",
    dataType: 'json',
    success: function (data) {
        $.each(data,function(i,data)
        {
          console.log(data.user_profile.real_name);//This will loop 
      //through the result
        });
        console.log(data[0].user_profile.real_name); //Show only first //result
        }

     });
     });

</script>

Don't forget to add Jquery before the ajax code

Answer 4

 var obj = [{ "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58", "type": "message", "text": "hey there", "source_team": "TN4AF0V5W", "team": "TN4AF0V5W", "user_profile": { "real_name": "marvelmohinish99", "team": "TN4AF0V5W" } }, { "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58", "type": "message", "text": "welcome", "source_team": "TN4AF0V5W", "team": "TN4AF0V5W", "user_profile": { "real_name": "marvelmohinish99", "team": "TN4AF0V5W" } }, { "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58", "type": "message", "text": "Help me", "source_team": "TN4AF0V5W", "team": "TN4AF0V5W", "user_profile": { "real_name": "marvelmohinish99", "team": "TN4AF0V5W" } } ]; for (var i = 0; i < obj.length; i++) { console.log("Real name" + i + ": " + obj[i].user_profile.real_name); }