Parsing JSON

JohnZeman · November 07, 2017, 06:14:13 PM

I'm trying to extract the number of files assigned to a collection. My code at the end of this post is for the Flag Set collection and it returns

Code Select

{ "collections": [ { "filesCount": 3 } ] }

which is the correct number of files assigned.

My question is how do I parse that result to get just the number of files (3) that are assigned to the flag set collection? Thanks in advance.

Code Select


<body>
   <div class="container">
      <p id="demo"></p>
   </div>

   <script>
      $(document).ready(function() {

         IMWS.get('v1/collections', { // Get Flag Set
            id: '11',
            fields: 'filescount'
         }).then(function(response) {
            var test = (JSON.stringify(response, null, 2));
            document.getElementById("demo").innerHTML = test;
         });
      });
   </script>
</body>

Mario · November 07, 2017, 06:28:05 PM

Do you use the debugger in your browser when you write new apps? I can highly recommend it.
If so you can see the contents of the response object when you set a breakpoint into your function and then point the mouse at response. This makes things much clearer, usually:

The /collections endpoint returns an array of 0 to n collection objects, with one element for each collection you have requested. These collection objects contain the fields you have requested.

Since you have requested only one collection, response.collections contains one element.
To access the contents of that element you just use:

console.log( collections[0].filesCount );

If you request multiple collections, you can use a loop

for (var i = 0; i < response.collections.length; ++i) {
console.log( response.collections.fileCount );
}

Here is how it looks when I request the collections 11,12,13

The same principle is also used when you request folders, files, categories etc.

JohnZeman · November 07, 2017, 07:04:31 PM

Thanks Mario but I'm afraid most of that went over my head like a Boeing 747. I have attempted to use the debugger in Chrome but to be honest I don't know what I'm even looking to see with it.

I'm a working example kind of guy, and so far I haven't been able to come up with a working example that actually works. When I try the following:

Code Select


         IMWS.get('v1/collections', { // Get Flag Set
            id: '11',
            fields: 'filescount'
         }).then(function(response) {

            response = {
               collections: Array(1)
            }
            console.log(collections[0].filesCount);

            // var test = (JSON.stringify(response, null, 2));
            // $("#demo").text(test);
         });

The console returns the following errors

Code Select


WARN:jQuery.Deferred exception: collections is not defined
WARN:undefined
WARN:ReferenceError: collections is not defined
    at Object.<anonymous> (http://127.0.0.1:50519//user/My%20App/index.html?cb=44005453:40:25)
    at j (http://127.0.0.1:50519/system/jquery/dist/jquery.min.js:2:29948)
    at k (http://127.0.0.1:50519/system/jquery/dist/jquery.min.js:2:30262)

thrinn · November 07, 2017, 07:11:12 PM

John,
if you just want to access the number of files:

Code Select

response.collections[0].filesCount;

That means:
- Take the response object.
- Access the "collections" property of it. This property contains an array.
- Take the first entry (the first collection of a possible multitude).
- Of this array entry, take the (value of the ) filesCount property.

Mario · November 07, 2017, 07:30:53 PM

I mentioned that in my response above.

Your code

response = {
collections: Array(1)
}
console.log(collections[0].filesCount);

cannot work.What would work is this:

response = {
collections: [
{
filesCount : 3
}
]
}

This creates an object named response {}
It contains an array named collections []
The collections array contains one object {}
This object has one member (element): filesCount with the value 3.

To access this filesCount you do

response.collections[0].filesCount

If the collection array has two elements, you can do

response.collections[0].filesCount
response.collections[1].filesCount

The screen shots I included are from Chrome. You can see that I have set a break point on the line with var test = (taken from your code) and then just pointed the mouse cursor at the response parameter of the function. Chrome then shows you what response contains.

See https://developer.chrome.com/devtools for tutorials and info about how to use the Chrome debugger.
Being able to debug your app in a debugger (Chrome, FireFox, Edge - all include developer tools) is essential. Else you will always have to guess things and that is no good.

JohnZeman · November 07, 2017, 07:39:33 PM

Ah, thank you Thorsten and Mario.

I have to admit that sometimes I can be really dense when it comes to understanding how things work.

In case anyone else is wondering how to do the same thing, the following works for me to return the number of files assigned to the Flag Set collection.

Code Select

<body>
   <div class="container">
      <p id="demo"></p>
   </div>

   <script>
      $(document).ready(function() {

         IMWS.get('v1/collections', { // Get Flag Set
            id: '11',
            fields: 'filescount'
         }).then(function(response) {
            $("#demo").text(response.collections[0].filesCount);
         });

      });
   </script>
</body>

Mario · November 07, 2017, 07:45:02 PM

QuoteI have to admit that sometimes I can be really dense when it comes to understanding how things work.

Welcome to the club.

This seems to be an easy video tutorial for Google Chrome:

https://www.youtube.com/watch?v=0GfQ2-jKhLM

JohnZeman · November 07, 2017, 07:59:40 PM

Thanks again Mario. I have to leave town for most of the day now but later on I'll for sure study that video and debugger tutorials.

Mario · November 07, 2017, 09:00:39 PM

Quote from: JohnZeman on November 07, 2017, 07:59:40 PM
Thanks again Mario. I have to leave town for most of the day now but later on I'll for sure study that video and debugger tutorials.

Definitely worth the time. When you can actually step through your app and see what it is doing, you can develop a lot faster.