Find JSON Objects With Same Property and Separate Them

Introduction

Today, this tip explains how to find the objects with the same property from a JSON and separate them to be shown in the UI. I hope you will like it.

Background

Yesterday, I came across a situation where there was a need to find the objects with the same property from some JSON data and separate them. So I thought of sharing that with you all.

Using the Code

First of all, we will add a jQuery reference as in the following code snippet:

<script src="jquery-2.1.4.min.js"></script>   

Now we need some data, right? Please have a look at the following JSON data:

var data = '[{"name":2014,"data":
[{"x":"1","y":222808746.81}]},{"name":2013,
"data":[{"x":"2","y":289647045.18}]},
{"name":2014,"data":[{"x":"2","y":285136890.07}]},
{"name":2013,"data":[{"x":"3","y":370853178.74}]},
{"name":2014,"data":[{"x":"3","y":403272964.28}]},
{"name":2012,"data":[{"x":"4","y":217294031.36}]},
{"name":2013,"data":[{"x":"4","y":224715039.94}]},
{"name":2014,"data":[{"x":"4","y":249034460.23}]},
{"name":2012,"data":[{"x":"5","y":215978054.15}]},
{"name":2013,"data":[{"x":"5","y":241211810.92}]},
{"name":2014,"data":[{"x":"5","y":245950715.8}]},
{"name":2012,"data":[{"x":"6","y":262898180.85}]},
{"name":2013,"data":[{"x":"6","y":280550623.51}]},
{"name":2014,"data":[{"x":"6","y":295780079.03}]},
{"name":2012,"data":[{"x":"7","y":217310275.85}]},
{"name":2013,"data":[{"x":"7","y":230973675.47}]},
{"name":2014,"data":[{"x":"7","y":238227382.03}]}]';  

Next, we need some UI elements as in the following:

<div id="initialData"></div>
<div id="newData"></div> 
<button id="separateme">Make Me Separate</button>   

What next? We need to show this data to our UI, right? For that, I am calling a function in our document ready function.

$(function () {
        $('#newData').hide(); 
        loadinitialData(); 
    });  

The following is the function definition for the loadinitialData() function.

function loadinitialData() { 
     jsonObject = $.parseJSON(data); 
     var html = '<table><th>Year<
     /th><th>X Value</th><th>Y Value</th>'; 
     for (i = 0; i < jsonObject.length; i++) {    
         html += '<tr><td>' + jsonObject[i].name + 
         '</td><td>' + jsonObject[i].data[0].x + 
         '</td><td>' + 
         jsonObject[i].data[0].y + '</td></tr>';    
     }
     html += '</table>';
     $('#initialData').append(html);
 }    

What we are doing here is parsing our data and appending the data to our UI element using a for loop.
Now after running it, you will get the following output:

We have successfully formatted our data and shown it to our UI. Cool, right?

So shall we go and separate our data? I guess you said "Yes". Awesome. Now we will create a click event for our "Make me sort" button as in the following:

$('#separateme').click(function () {    
         loadnewData();    
         $('#separateme').hide();
         $('#newData').show();  
     });  

Here is the definition of the loadnewData() function.

function loadnewData() { 
      for (i = 0; i < uniqueNames.length; i++) {
          var currentName = uniqueNames[i];    
          var uniqueDataArray = $.grep(jsonObject, function (data) {   
              return data.name == currentName;  
          });  
          var html = '<table><th>Year</th>
          <th>X Value</th><th>Y Value</th>'; 
          for (j = 0; j < uniqueDataArray.length; j++) {  
              html += '<tr><td>' + uniqueDataArray[j].name + 
              '</td><td>' + uniqueDataArray[j].data[0].x 
             + '</td><td>' + uniqueDataArray[j].data[0].y + '</td></tr>';   
          }    
          html += '</table>';    
          $('#newData').append(html);    
      }    
 }  

Now, I guess you could determine the difference of both the loadinitialData() and loadnewData() functions. Yeah, you are right, we are using a function "grep" there.

var uniqueDataArray = $.grep(jsonObject, function (data) {
        return data.name == currentName;    
        });   

What our "grep" function does is, it will take all objects at a time that has the property "name" as currentName.

return data.name == currentName;   

Once that is done, we will create a separate HTML table for each property and bind it to our parent element. Shall we now look into the complete code? We have done everything.

Complete Code

<!DOCTYPE html>    
<html>    
<head>    
    <title>Find JSON Object by its property,separate and show demo - Sibeesh Passion</title>  
    <script src="jquery-2.1.4.min.js"></script>    
    <style>    
        #initialData {   
            border: 1px solid #999;   
            width:220px;    
            padding:10px;    
            float:left;    
        }    
        #newData {    
            border: 1px solid #999;    
            width:220px;    
            padding:10px;    
            float:left;    
        }    
         td {    
            border: 1px solid #ccc;    
            padding: 5px;    
            text-align: center;    
        }    
    </style>    
    <script>      
        var data = '[{"name":2014,"data"
        :[{"x":"1","y":222808746.81}]},
        {"name":2013,"data":[{"x":"2",
        "y":289647045.18}]},{"name":2014,"data":
        [{"x":"2","y":285136890.07}]},
        {"name":2013,"data":[{"x":"3",
        "y":370853178.74}]},{"name":2014,"data":
        [{"x":"3","y":403272964.28}]},
        {"name":2012,"data":[{"x":"4",
        "y":217294031.36}]},{"name":2013,"data":
        [{"x":"4","y":224715039.94}]},{"name":2014,
        "data":[{"x":"4","y":249034460.23}]},
        {"name":2012,"data":[{"x":"5",
        "y":215978054.15}]},{"name":2013,"data":
        [{"x":"5","y":241211810.92}]},{"name":2014,
        "data":[{"x":"5","y":245950715.8}]},
        {"name":2012,"data":[{"x":"6",
        "y":262898180.85}]},{"name":2013,"data":
        [{"x":"6","y":280550623.51}]},
        {"name":2014,"data":[{"x":"6",
        "y":295780079.03}]},{"name":2012,"data":
        [{"x":"7","y":217310275.85}]},{"name":2013,
        "data":[{"x":"7","y":230973675.47}]},
        {"name":2014,"data":
        [{"x":"7","y":238227382.03}]}]';    

        var jsonObject;    
        var uniqueNames = [2013, 2012, 2014]; 
        $(function () {    
            $('#newData').hide();    
            loadinitialData();    
            $('#separateme').click(function () { 
                loadnewData();    
                $('#separateme').hide();    
                $('#newData').show();    
            });    
        });    
        function loadinitialData() {    
            jsonObject = $.parseJSON(data);    
            var html = '<table><th>Year</th>
            <th>X Value</th><th>Y Value</th>';    
            for (i = 0; i < jsonObject.length; i++) {    
                html += '<tr><td>' + jsonObject[i].name + '</td><td>' + 
                jsonObject[i].data[0].x + '</td>
                <td>' + jsonObject[i].data[0].y + '</td></tr>';    
            }    
            html += '</table>';    
            $('#initialData').append(html);    
        }    
        function loadnewData() {          
            for (i = 0; i < uniqueNames.length; i++) {   
                var currentName = uniqueNames[i];    
                var uniqueDataArray = $.grep(jsonObject, function (data) {    
                    return data.name == currentName;    
                });    
                var html = '<table><th>Year</th>
                <th>X Value</th><th>Y Value</th>';    
                for (j = 0; j < uniqueDataArray.length; j++) {    
                    html += '<tr><td>' + uniqueDataArray[j].name + 
                    '</td><td>' + uniqueDataArray[j].data
                    [0].x + '</td><td>' + 
                    uniqueDataArray[j].data[0].y + '</td></tr>';    
                }    
                html += '</table>';    
                $('#newData').append(html);    
            }  
        }      
    </script>    
</head>    
<body>    
    <div id="initialData"></div>   
    <div id="newData"></div>    
    <button id="separateme">Make Me Separate</button>   
</body>    
</html>    

Now it is time to see our output as in the following:

You can find we have separated our object and shown it in a separate table. Cool. That is all for the day. I will return with another article soon.

Conclusion

I hope you liked this tip. Please share with me your valuable thoughts and comments. Your feedback is always welcome.

Thanks in advance. Happy coding!

History

• 10^th June, 2015: Initial version