SyntaxError: Unable to parse bindings with json

Question

I'm just starting with Knockout JS, and I'm having trouble finding what is wrong here. I'm calling a controller Web Service to get some data that I want to display in my page.

This is my ViewModel:

function ViewModel() {
    var self = this;

    self.MonthSalesList = ko.observableArray();

    var url = 'myurl';

    self.GetQueryData = function () {
        $.ajax({
            type: "GET",
            url: url,             
            dataType: "json",
            success: function (data) {
                console.log('callback success');
                console.log(data);
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
                self.MonthSalesList(array);
            },         
            error: function (jq, st, error) {
                alert(error);
            }           
        });
    }
}

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});

And in html:

<body>
    <table>
        <thead>
            <tr>
                <th>Year</th>
                <th>Mes</th>
                <th>Ano Atual</th>
                <th>Ano Anterior</th>
                <th>Variação</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: vendasMesList">
            <tr>
                <!-- <td data-bind="text: ko.toJSON($data)"></td> -->

                    <td data-bind="text: Year"></td>
                    <td data-bind="text: Mes"></td>
                    <td data-bind="text: Ano Atual"></td>
                    <td data-bind="text: Ano Anterior"></td>
                    <td data-bind="text: Variação"></td>

                </tr>
            </tbody>
        </table>
        <br/>
        <input type="button" value="Get Sales" data-bind="click: GetQueryData" />
    </body>

When I load the page and click on "Get Sales", I only get the first values of the json data:

The data I'm trting to get looks like this on Postman:

The only difference I see it's the numeric type of "Ano Atual".

Does anyone know what I'm doing wrong?

Thank you.

OfirD · Accepted Answer · 2020-03-29T22:45:29.917

1

You need to change these:

<td data-bind="text: Ano Atual"></td>
<td data-bind="text: Ano Anterior"></td>

...into these:

<td data-bind="text: $data['Ano Atual']"></td>
<td data-bind="text: $data['Ano Anterior']"></td>

That's ugly, but seems to be the way to go.

edited Mar 29 '20 at 22:45

answered Mar 29 '20 at 08:55

OfirD

9,442
5
47
90

If I do that, I get the keys, and not the values. Any thought on how to get the values? – Dreekun Mar 29 '20 at 20:30
@Dreekun, I'm not sure what are you getting. What's displayed as the `td`s text? – OfirD Mar 29 '20 at 21:24
The json keys: "Ano Anterior" and "Ano Atual" for every row of those observables. http://prntscr.com/rp1lw2 – Dreekun Mar 29 '20 at 21:30
@Dreekun, I see in your linked image you've got a `mapping` object, defining what properties to observe - add these two as well. – OfirD Mar 29 '20 at 21:44
It works the same way, unfortunately: http://prntscr.com/rp1um1 – Dreekun Mar 29 '20 at 21:49

SyntaxError: Unable to parse bindings with json

1 Answers1