Simple Javascript demo?

[michael-fischer]

Hopefully this is something that is easy to fix. I am trying to evolve the Hello World (Plain Javascript) tutorial to be more dynamic similar to what is outlined in Example of loading it dynamically under how do I get CLDR data. The merged code looks something like the following.

$.when(
  $.get("/Scripts/cldr/data/main/en-US/ca-gregorian.json"),
  $.get("/Scripts/cldr/data/supplemental/likelySubtags.json"),
  $.get("/Scripts/cldr/data/supplemental/timeData.json"),
  $.get("/Scripts/cldr/data/supplemental/weekData.json")
).then(function () {

    // Normalize $.get results, we only need the JSON, not the request statuses.
    return [].slice.apply(arguments, [0]).map(function (result) {
        return result[0];
    });
}).then(Globalize.load).then(function () {
    // Instantiate "en".
    var en = Globalize( "en-US" );
    // Use Globalize to format dates.
    document.getElementById( "date" ).innerHTML = en.formatDate( new Date(), {
      datetime: "medium"
    });
    // Use Globalize to format numbers.
    document.getElementById( "number" ).innerHTML = en.formatNumber( 12345.6789 );
    // Use Globalize to format a message with plural inflection.
    var pluralData = {
      one: "{0} result",
      other: "{0} results"
    };
    document.getElementById( "plural-0" ).innerHTML = en.formatPlural( 0, pluralData );
    document.getElementById( "plural-1" ).innerHTML = en.formatPlural( 1, pluralData );
    document.getElementById( "plural-2" ).innerHTML = en.formatPlural( 2, pluralData );
    document.getElementById( "requirements" ).style.display = "none";
    document.getElementById( "demo" ).style.display = "block";
});

This code errors in the call to Globalize.load when it checks for IsPlainObject. It tries to compare the JSON string to "[object Object]"' I am a back end developer moving into javascript so was hoping you could verify that I am on the right path and my assumptions about a new [to me] language are valid. Perhaps offer a hint as to the changes that need to be made. I tried to look at the test suites but they use other technologies.

Thanks,

Michael Fischer

[rxaviers]

Hi @michael-fischer, sorry for the delay.

Your example seems right to me. So, I need some more input from you. What browser and OS are you running this on? Which version of the dependencies and globalize are you using?

Alternatively, please consider testing out this https://gist.github.com/rxaviers/9fec3ae0dfb7cdb0a0ce (tip: use git clone to fetch these files).

[rxaviers]

Please, fell free to add new comments if necessary.

[michael-fischer]

@rxaviers, I apologize for the delay. I was away last week and just got back to the computer that had my example.

Well at least I am consistent. Using your gist I get the same error messages. I have tried hosting in IIS Express and using Python 3.4. I am using Chrome 39 on a Windows 8.1 box. However, I see in 343 that you got your example up and running without any trouble on a windows 8 box (Chrome 37).

I'll keep poking around to see what I have gotten wrong.

[rxaviers]

How did you get dependencies?

[michael-fischer]

Oh, an additional note, that I don't think will make a difference, but wanted to include for thoroughness. I have a Scripts folder that contains the extracted dependencies. I of course updated the index.htm file to match - both the script calls themselves, and the get json calls.

When running in the Python34 http.server the calls to the js and json files all return a 200 status.

I see that while I was typing this you asked how I get the dependencies. I download and extracted the tarball through the web browser.

Michael

[rxaviers]

Please, try using the gist untouched using the dependencies from tar -xzf dependencies.tgz. Let's see what we get. Thanks

[michael-fischer]

Same experience.

[rxaviers]

Sorry I can't reproduce the bug you're experiencing.

As I said in #343, the gist works on:

• Firefox (32) in linux, mac os mavericks and windows 7,
• Chrome (37) in linux, mac os mavericks and windows 7,
• IE (10 and 9) in windows 8, windows 7,
• Safari 5.1 in windows 7 and Safari 7 in mac os mavericks,

I also ran it on the browsers and OSes below and it ran just fine.

• Chrome (39) on Mac OS Yosemite, Windows 7 and Windows 8.

[michael-fischer]

I'm sure I am doing something annoyingly simple - wrong. I am getting a hold of a mac to give it a try. I'll post if I figure out what I am missing.

[rxaviers]

Please, do. Thanks.

[michael-fischer]

@rxaviers,

I was able to get your sample to work by making a couple of changes to the index.html. Some that probably had no effect on it like making the code more xhtml compliant (adding the missing html opening tag, cleaning an orphan span end tag, etc..) and then modifying the calls to get to state that the return data was JSON. Essentially, I modified the original code.

        $.when(
        $.get("cldr/main/en/ca-gregorian.json" ),
        $.get("cldr/main/en/numbers.json" ),
        $.get("cldr/supplemental/timeData.json" ),
        $.get("cldr/supplemental/weekData.json" ),
        $.get("cldr/supplemental/likelySubtags.json" ),
        $.get("cldr/supplemental/plurals.json" )

to

        $.when(
        $.get("cldr/main/en/ca-gregorian.json", null, null, "json"),
        $.get("cldr/main/en/numbers.json", null, null, "json"),
        $.get("cldr/supplemental/timeData.json", null, null, "json"),
        $.get("cldr/supplemental/weekData.json", null, null, "json"),
        $.get("cldr/supplemental/likelySubtags.json", null, null, "json"),
        $.get("cldr/supplemental/plurals.json", null, null, "json")

So, Now my question is that when I try to add other cultures that I am interested in (en-US, es-419), is there anything else that I need to do besides copy the data from the CLDR full json? I did this for the above locales and it seems to want the default language loaded as well (en and es respectively). I am confused as to why this might be necessary since the included en-GB works just fine.

Michael Fischer

[dmethvin]

Use $.getJSON instead of $.get for robustness. The server is probably not configured to return the right MIME type for .json files. If the server returns an incorrect type, $.get may not work.

[rxaviers]

@michael-fischer, about other cultures (or more precisely locales), there's nothing else you need to do. Although, you need to load en locale for en-US, since en, en-US or en-Latn-US are actually the same locale (see more details). For es-419, load es-419. Did you find any problem? If so, you'll probably need open a new bug considering it's a different issue.

[clazette]

I could be wrong but this appears to be associated with Globalize.load in globalize.js. This call Cldr.load.apply( Cldr, arguments ); negates the fact that you executed this in the example:

`// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
'
because you just turn around and use arguments which is an array of the files retrieved each containing another array with 3 elements. This causes Cldr.load.apply to fail the isPlainObject check.

I posted what I believe is the same issue - rxaviers/cldrjs#45

I just found this post looking for something else.

[haklanje385]

This did trick for me:

    $.when(
        $.get("cldr/supplemental/likelySubtags.json", null, null, "json"),
        $.get("cldr/main/en/numbers.json", null, null, "json"),
        $.get("cldr/main/en/ca-gregorian.json", null, null, "json")
    ).then(function () {
        return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
            Globalize.load(result[0]);
        })
    }).then(function () {
        Globalize.locale(locale)
    });`

[rxaviers]

All, if anyone finds anything wrong in globalize code, docs, and/or examples, please create another issue with details. So far I'm considering this a closed issue.