How to get the array of properties

rgillesen

Hi,

I know this is a javascript question and not an API question, but I cannot seem to figure this out.
When I retrieve the properties of a folder, how can I do this in an easy way.

This is what is returned by the API:

{"APIVersion":4,"auth":true,"contents":[{"childCount":15,"dataHash":null,"dataSize":null,"id":2000,"isContainer":true,"isFavorite":false,"isNotifySet":false,"isReadOnly":false,"isRootShare":false,"isShareable":false,"isShared":false,"isSubscribed":null,"mimeType":null,"modifyDate":"2014-01-10T09:02:56Z","modifyUserName":"Admin","name":"Enterprise","numComments":0,"originDataID":0,"originSubtype":null,"originTypeName":null,"parentID":-1,"permissions":-2130706433,"rootType":"EWS","sharedFolder":0,"subtype":141,"thumbnailEnabled":false,"versionNum":0}],"count":1,"cstoken":"VF8XzjGbM9SQGolo5qSWgG35HqTT%2FMcYsRWkUGwz2JM%3D","ok":true,"serverDate":"2014-02-07T19:32:54Z","userID":127621}

Currently I do it like this:

function showFileInfo() {
var fileID = document.getElementById("fileID").value;
if (fileID == "") {
$('.output').text("Please enter a file ID");
} else{
    $.ajax({
    url : BASE_URL + '/content/v4/nodes/' + fileID,
    data : {},
    success : function(data) {
    $('.output').text("");

            var numberOfProperties = data.contents.length;
            var properties = new Array();
            properties = data.contents;

            for (var i = 0; i < numberOfProperties; i++){

            $('.output').append("<tr><td>" + "Name: " + properties[i].name + "</td></tr>");
            $('.output').append("<tr><td>" + "Description: " + properties[i].description    + "</td></tr>");
            $('.output').append("<tr><td>" + "versionNum: " + properties[i].versionNum  + "</td></tr>");
    }
},
    error : function(data) {
$('.output').append("failure");
}
});
 }

}

But it should be possible to do it much simpeler like so:

for (var i = 0, i < numberOfProperties; i++ {
    $('.output').append(properties[i][0], properties[i][1]); // This should be the easy way
}

But that does not return anything. What do I do wrong here?

Thanks,

Roel

Ferdinand Prantl

Both properties[i][0] and properties[i][1] return undefined, because properties[i] returns an object - { "id": 2000, ... }, which is not an Array (with at least two items at indexes 0 and 1); thus the index operator called with a number has nothing to return. You use the index operator with property names to access object members:

properties[i]            -->  { "id": 2000, ... }
{ id: 2000, ... }[0]     -->  undefined
{ id: 2000, ... }["id"]  -->  2000

Object properties don't have indexes to access them by. You can enumerate all properties in a JSON object by a for loop:

for (propertyName in someObject) {
  propertyValue = someObject[propertyName];
  ...
}

When dealing with objects in general, you may need to pick just directly set properties (hasOwnProperty) or skip functions (typeof propertyValue !== "function") etc. You're processing JSON object literals with primitive values only in your case and that's why it's not necessary.

I assume that you want to render all property names and values as rows in a table like this:

<tr><td>{name}</td><td>{value}</td></tr>
...

And you have a target placeholder in your HTML like this:

<div class="output"></div>

This would be the full code:

// Reset the output placeholder with a progress indicator
var output = $('.output').text('Loading...');
$.ajax({
  url: BASE_URL + '/content/v4/nodes/' + fileID,
  success : function (data) {
    var nodes = data.contents,
        numberOfNodes = nodes.length,
        outputTable, i, node, propertyName, propertyRow;
    // Empty the target placeholder and create a table there
    outputTable = $('<table>').appendTo(output.empty());
    // Loop over all nodes
    for (i = 0; i < numberOfNodes; ++i) {
      node = nodes[i];
      // Loop over all properties of a node
      for (propertyName in node) {
        // Add a row to the table with the property name and value
        // in two separate cells
        propertyRow = $('<tr>').appendTo(outputTable);
        $('<td>').text(propertyName).appendTo(propertyRow);
        $('<td>').text(node[propertyName]).appendTo(propertyRow);
      }
      // Put an empty line between two adjacent nodes
      if (i !== numberOfNodes - 1) {
        $('<tr><td colspan="2"><hr></td></tr>').appendTo(outputTable);
      }
    }
  },
  error : function (jqxhr, status, error) {
    // Put the HTTP status and the error thrown to the output placeholder
    output.text('Status: ' + status + ', error: ' + error);
  }
});

A single table for all nodes showing all their properties is probably not the best way to display the response result, but I left it as-is; it wasn't important to explain the problem.

Good luck! :-)