Sort the Dawgs

Videos for this page Working example

SIMILE Exhibit is nice, but hey! What's the big deal about sorting JSON object stuff?

Suppose that you have the following JSON object that describes different breeds of Husky-type dogs.

 
 items: [
{  breed:              "Alaskan Malamute",
   MINweight:           75,
   MAXweight:           85,
   height:             "23-25 inches",
   coat:               "medium-short",
   colors:             [ "Light grey", "Black", "White underbody" ]
},
{  breed:              "Chinook",
   MINweight:           65,
   MAXweight:           75,		
   height:             "23 inches",
   coat:               "double coat",
   colors:             [ "Tawny with black", "Dark tawny", "Buff markings" ]
},          
{  breed:              "Greenland",
   MAXweight:          66,                
   height:             "25 inches",
   coat:               "hard coat",
   colors:             [ "Any color except albino" ]
}, 
{  breed:              "Samoyed",
   MINweight:           50,
   MAXweight:           65,                
   height:             "19-23.5 inches",
   coat:               "Dense double coat",
   colors:             [ "Pure white, cream, or white with biscuit" ]
}, 		   
{  breed:              "American Eskimo",
   MINweight:           18,
   MAXweight:           35,
   height:             "15-19 inches",
   coat:               "thick, straight coat",
   colors:             [ "Pure white is preferred" ]  
}
]

Download this JSON object

Use this HTML page

Here's all the code that you'll need for your HTML page

 

<h1>Sort the Dawgs!</h1>
 
<input type="button" value="Sort the Dawgs by breed" onClick="doSortByBreed()">
<input type="button" value="Sort the Dawgs by Maximum height" onclick="doSortByWeight()">
 
<br><br>
 
<div id="results" 
  style="background-color:#FFFF00; border: solid medium black; width: 400px; padding: 10px">
</div>

The basic HTML page looks like this

What happens when you click a button

Click the "Sort the Dawgs by breed" button and your program fetches the breeds and alphabetizes them. Then it presents each breed with its weight and height information embedded in some text. Note the indentation.

Click the "Sort the Dawgs by Maximum weight" button and your program fetches the maximum weight of each dog and orders them numerically (small to large is the default). Then it presents the breed name and the color information. Note the use of italic font, the indentation and how each piece of color information is placed on a separate line.

Some developer notes

The easiest way to incorporate the JSON object into your HTML page is to embed the object in <script> tags and use the eval() function.

 

var jsonData = eval(   
  {
    ....put the JSON object here
  }
);

You can index into the collection of items.

 
function doJSON()
{
    for (var i = 0; i < jsonData.items.length; i++)
    {
        alert(  jsonData.items[i].breed  );
    }
  
 } 
  

You can test for values.

 

function doJSON()
{
    for (var i = 0; i < jsonData.items.length; i++)
   {
        if ( jsonData.items[i].breed == "Chinook" )
        {
            alert ( jsonData.items[i].coat );
        }
   }
 
}  

You can harvest data from the JSON object, put them into an array and sort the array. Iterating through the array, you can create new DOM elements such as <p> elements and then populate them with text nodes.

 
function doJSON()
{
  	var labelArray = new Array();
	
	for (var i = 0; i < jsonData.items.length; i++)
	{
		labelArray[i] = jsonData.items[i].breed;
	}
 
 	labelArray.sort();
	
	var r = document.getElementById( "results" );
	
	for (var j = 0; j < labelArray.length; j++)
	{
		
		var newText = labelArray[j];
		var newTextNode = document.createTextNode( newText );
		var newParagraphNode = document.createElement( "p" );
		newParagraphNode.appendChild( newTextNode );
		r.appendChild( newParagraphNode );
		
	}
 
 }   

You can harvest number data and use a special function to sort numerically. You can use the sorted array to index back into the JSON object to present sorted results. You can can give your new text nodes some style attributes.

 

function compareNumbers( a, b)
 {
 	return a - b;
 }
 
function doJSON()
 { 	
 	
	var numArray = new Array();
	
	for (var i = 0; i < jsonData.items.length; i++)
	{
		numArray[i] = jsonData.items[i].MAXweight;
	}
	
 	numArray.sort(compareNumbers);
 
 	var r = document.getElementById( "results" );
	
	for (var j = 0; j < numArray.length; j++)
	{
		var weight = " ";
		var breed = " ";
		
		for (var k = 0; k < jsonData.items.length; k++)
		{
			if (jsonData.items[k].MAXweight == numArray[j])
			{
				weight = jsonData.items[k].MAXweight;
				breed = jsonData.items[k].breed;
			}
		}
 
		var newText = breed + " weights " + weight;
		var newTextNode = document.createTextNode( newText );
		var newParagraphNode = document.createElement( "p" );
					
			newParagraphNode.setAttribute( "style", "color: red" );
			
		newParagraphNode.appendChild( newTextNode );
		r.appendChild( newParagraphNode );	
	}
	
 }   

When everything is working, add this project to your course deliverables page.