Domo.js is trying to JSON.parse a png

Question

While developing a custom app for my organization, I am trying to request the name and the avatar of the individual accessing the card. I am able to get the name of the individual without any problems, but when requesting the avatar image I get the following console error:
Uncaught (in promise) Error: Invalid JSON response at XMLHttpRequest.d.onload (domo.ts:309:18)

I have looked into the domo.js code, and after making some limited sense of things, I found that it tries to JSON.parse the .png that is returned.

When checking the network dev tools tab I can see the correct image getting returned, but it doesn't get passed to the app.

Here is the function that returns the error:

d.onload = function() {
                            var e;
                            if( u(d.status) ) {
                                !["csv","excel"].includes(r.format) && d.response || i(d.response), "blob" === r.responseType && i(new Blob([d.response], { type:d.getResponseHeader("content-type") }));
                                var t = d.response;
                                try{
                                    e = JSON.parse(t)
                                }
                                catch(e){
                                    return void c(Error("Invalid JSON response"))
                                }i(e)
                            }else c(Error(d.statusText))
                        }

As far as I can tell, e refers to the Domo environment, although I am not 100% sure of that.

Note: I am turning to stackoverflow because my organization still has open support tickets with Domo that are more than 2 years old with no response, so I have little faith in getting a timely response from Domo regarding this issue.

UPDATE: Here is the full function that is called-

function i(e,t,r,n,a) {
                    return r = r || {}, new Promise((function(i,c) {
                        var d = new XMLHttpRequest;
                        if (n?d.open(e,t,n):d.open(e,t), p(d,t,r), function(e,t) {
                            t.contentType ? 
                            "multipart" !== t.contentType && e.setRequestHeader("Content-Type", t.contentType)
                            : e.setRequestHeader("Content-Type", o.DataFormats.JSON)
                        } (d,r), function(e) {
                            s && e.setRequestHeader("X-DOMO-Ryuu-Token", s)
                        } (d), function(e,t) {
                            void 0 !== t.responseType && (e.responseType = t.responseType)
                        } (d,r), 
                        d.onload = function() {
                            var e;
                            if( u(d.status) ) {
                                !["csv","excel"].includes(r.format) && d.response || i(d.response), "blob" === r.responseType && i(new Blob([d.response], { type:d.getResponseHeader("content-type") }));
                                var t = d.response;
                                try{
                                    e = JSON.parse(t)
                                }
                                catch(e){
                                    return void c(Error("Invalid JSON response"))
                                }i(e)
                            }else c(Error(d.statusText))
                        },
                        d.onerror = function() {
                            c(Error("Network Error"))
                        }, a) 
                        if (r.contentType && r.contentType !== o.DataFormats.JSON) d.send(a);
                        else {
                            var f = JSON.stringify(a);
                            d.send(f)
                        }
                        else d.send()
                    }))

Here is the domo.js method that is being called to get the image:

e.get = function(e, t) {
                        return i(o.RequestMethods.GET, e, t)
                    },

What is `t` before `JSON.parse(t)` is called? `e` seems to refer to a few things here: the parsed response and an error . — mykaf, Apr 25 '22 at 16:50
well you have the code, I'd find this code in your browsers devtools and set up a breakpoint to see if you get more specific, maybe also look at the call stack. — fnostro, Apr 25 '22 at 17:00
@user1599011 I have updated my post to include the full function and the `get` method defined by domo.js. And thank you! — Skouzini, Apr 25 '22 at 17:32
@fnostro I will do that and update if I find out any more information that could be relevant. Thank you! — Skouzini, Apr 25 '22 at 17:33
@user1599011 are you referring to where it is `var t = d.response`? Meaning that `t` is the response from the `XMLHttpRequest`, right? — Skouzini, Apr 25 '22 at 19:31
Yes; what is its value? A string containing an image path? JSON? — mykaf, Apr 25 '22 at 19:49
@user1599011 this is a piece of what is returned from `console.log`: `�PNG�9w�9j�Z��֪��^��16��*i��d��[k4�Z��Z3�J=hp��j>P��畟|^�ـ��V�U�T��` — Skouzini, Apr 26 '22 at 19:09
This is before you called `JSON.parse(t)`? Is this the raw data? something doesn't seem quite right. What is `d.getResponseHeader("content-type")` and `r.format`? — mykaf, Apr 26 '22 at 19:19
`r.format` is an object, but it is empty. And it looks like `d.getResponseHeader("content-type")` is trying to get a nonexistent response header from the XMLHttpRequest. (It returns as `null`) — Skouzini, Apr 26 '22 at 19:40
I may have figured out how to get it to work. This is really dumb, but all I had to do was set the query string to be the `` source... You would think that would be in the documentation, but no. It was not. Thank you for your help @user1599011. I really appreciate it. — Skouzini, Apr 26 '22 at 19:44

jasonleehodges · Accepted Answer · 2022-06-14T21:20:51.067

@Skousini you can get the avatar for a user by providing this URL directly to the src property of the <img> tag (obviously replacing the query params with the relevant information):

<img src="/domo/avatars/v2/USER/846578099?size=300&defaultForeground=fff&defaultBackground=000&defaultText=D" />

This documentation is available on developer.domo.com: https://developer.domo.com/docs/dev-studio-references/user-api#User%20Avatar

If you want to pull down data from endpoints, you don't have to use domo.js. You could use axios or any other HTTP tool. domo.js is trying to make HTTP requests simpler by automatically parsing json (since most requests are json based). There are a few other options for what data format that domo.get can support provided in this documentation: https://developer.domo.com/docs/dev-studio-tools/domo-js#domo.get

Domo.js is trying to JSON.parse a png

1 Answers1