Best practices way to access SQL Express database with Javascript

Question

User-858993849 posted

I am successfully accessing a Web API now, but not getting information back I can make sense of.  In trying to use the following tutorial,  https://www.codeproject.com/Articles/1264219/Creating-Web-API-in-ASP-NET-Core-2-0  , I am trying to get information back from the database using the following script.  I don't get an error, but also don't get anything back other than "object object".  What am I doing wrong?

Using the following script to get data from WideWorldImporters database, I get the "200" approval, so I am making a connection with the database using Javascript and a Web API. But I can't seem to figure out the syntax to get anything readable.  When I do the alert(data);, I get "object object", but I am looking for actual text from the Database.

var request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:55709/api/v1/Warehouse/StockItem', true);
    request.onload = function () {
        // Begin accessing JSON data here
        var data = JSON.parse(this.response);
        alert(data);
        //  alert(request.status);
        if (request.status >= 200 && request.status < 400) {
            data.forEach(StockItem => {
                const card = document.createElement('div');
                card.setAttribute('class', 'card');

                const h1 = document.createElement('h1');
                h1.textContent = StockItem.StockItemID;

                const p = document.createElement('p');
                StockItem.StockItemName = StockItem.StockItemName;
                p.textContent = `${StockItem.StockItemName}...`;

                container.appendChild(card);
                card.appendChild(h1);
                card.appendChild(p);
            });
        } else {
            const errorMessage = document.createElement('marquee');
            errorMessage.textContent = `Gah, it's not working!`;
            app.appendChild(errorMessage);
        }
    };

    request.send();
}

Any help would be much appreciated!</div>

Answer 1

User475983607 posted

JAYHAWKER

When I do the alert(data);, I get "object object", but I am looking for actual text from the Database.

That's just how alert() works.  Complex objects are shown as object [object].

Use the browser's dev tools (F12) to debug JavaScript.  The console.log() function writes the object model to the console so you can see what's in the response.

console.log(data);

Also dev tools shows the actual response in network trace tool it also shows any error returned from the web app which can be very helpful.   Dev tools has a robust debugger where you can place break points and single step though the logic.  I recommend learning how to use the browser debugging tools as it will speed up your development time.

https://developers.google.com/web/tools/chrome-devtools/

Answer 2

User753101303 posted

Hi,

Use alert(this.response); if you want to see the json.

You parse this to an object and ask JavaScript to show this object. As C# would show the type name, alert shows "object" rather than automatically showing the content of an object that could be huge.

Or if you want to show individual properties show them inside the loop (maybe using console.log so that you can look this using F12 Console when needed or ignore that and without having to click again and again on the OK button).

Answer 3

User-858993849 posted

Thanks Patrice,

That did help. I do now get JSON back.  What am i doing wrong with my "foreach". I am not getting anything displayed, even though I am getting information back from JSON.

Again, thanks for your help!

Answer 4

User-474980206 posted
Couple things.

First you can use the browsers network debugger to see if the response is what you expect
Second check that’s it’s an array, or the forEach will not work
Also you can set the responseType to json to auto parse
As you are using modern JavaScript you might try the fetch instead.

Answer 5

User475983607 posted

What am i doing wrong with my "foreach". I am not getting anything displayed, even though I am getting information back from JSON.

Use the browser's debugging tools. 

Set a break point and step through the code.  

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Answer 6

User-474980206 posted

a little code cleanup

   var request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:55709/api/v1/Warehouse/StockItem', true);
    request.responseType = 'json';
    request.onload = function () {
        if (request.status >= 200 && request.status < 300) {
            const data = request.response;
            if (!Array.isArray(data)) {
               alert('Invalid response type');
               console.log(JSON.stringify(data));
            } else {
                data.forEach(StockItem => {
                    const card = document.createElement('div');
                    card.setAttribute('class', 'card');

                    const h1 = document.createElement('h1');
                    h1.textContent = StockItem.StockItemID;

                    const p = document.createElement('p');
                    StockItem.StockItemName = StockItem.StockItemName;
                    p.textContent = `${StockItem.StockItemName}...`;

                    container.appendChild(card);
                    card.appendChild(h1);
                    card.appendChild(p);
               });
            }
        } else {
            const errorMessage = document.createElement('marquee');
            errorMessage.textContent = `Gah, it's not working!`;
            app.appendChild(errorMessage);
        }
    };

    request.send();
}

Answer 7

User-858993849 posted

Thank you very much for your efforts.  When running it, I get the alert saying "Invalid Response Type".

Answer 8

User711641945 posted

Hi JAYHAWKER,

JAYHAWKER

When running it, I get the alert saying "Invalid Response Type".

That means the response data you get from Action is not an array.You need to set breakpoint to check the type of the data you returned in your Action. Could you share a simple demo that could reproduce your issue?

Best Regards,

Rena