Scraping HTML text into JSON with jQuery, but cannot stringify because of circular reference

Question

This seems like a fairly common question, but I can't quite figure out what's going on in my situation.

The question "Stringify (convert to JSON) a JavaScript object with circular reference" explains that JSON.stringify can accept a filter function to help get around the circular references problem. I don't understand why my references are circular as I am creating new, simple objects.

Let's say you have an HTML structure like this:

<div class="oauth-permitted-apps">
    <div class="oauth-client">
        <span class="client_type">Web App</span>
        <span class="client_name">Name</span>
        <span class="client_secret">client_guid1</span>
    </div>
    <div class="oauth-client">
        <span class="client_type">Installed App</span>
        <span class="client_name">Name2</span>
        <span class="client_secret">client_guid2</span>
    </div>
    <div class="oauth-client">
        <span class="client_type">Installed App</span>
        <span class="client_name">Name3</span>
        <span class="client_secret">client_guid3</span>
    </div>
    <!-- and so on -->
</div>

With the following JavaScript:

var result = $('.oauth2-client')
    .filter( function() {
        return $(this).find('.client_type').text().toLowerCase().indexOf('installed') != -1;
    })
    .map(function() {
        return json = {
            id: $(this).find('.client_id').text(),
            name: $(this).find('.client_name').text()
        };
    });
JSON.stringify(result);

I would expect to see something like:

[
    {
        id: "client_guid2",
        name: "Name2"
    },
    {
        id: "client_guid3",
        name: "Name3"
    }
]

But... I have a circular reference. I don't understand why a new JavaScript object with only two properties does this. I'm guessing there's something going on with jQuery that I don't quite understand?

(Context: working on connecting to a web service using OAuth in a Windows Store App. They've made it a pain (the user has to provide JSON files to us, open web browsers a few times, and copy-paste a token within 60 seconds of generating it) so we'd like to automate the process for the user a bit. I've done things with a WebView that I'm not too proud of. It's a shame I cannot use window.external.notify because Windows 8.1 requires you to add the domains to the app manifest, but we don't know the domains to add!)

score 3 · Accepted Answer · answered Dec 18 '13 at 17:22

What you have is actually a jQuery object containing an array. You'll want to unwrap the array from the jquery object using .get().

JSON.stringify(result.get());

As mentioned in comments, Using $.map is an option too, though i find it to be uglier in this case than the other way of doing it.

var result = $.map(
    $('.oauth2-client').filter(function () {
        return $(this).find('.client_type').text().toLowerCase().indexOf('installed') != -1;
    }), 
    function (el) {
        return json = {
            id: $(el).find('.client_id').text(),
            name: $(el).find('.client_name').text()
        };
    });
JSON.stringify(result);

I simply used `.get()` because that was the path of least resistance. That did the trick. Will mark as answer when it lets me. — Guttsy, Dec 18 '13 at 17:29

Scraping HTML text into JSON with jQuery, but cannot stringify because of circular reference

1 Answers1