Json data- key values, Object.Keys error

Question

Json data- key values, Object.Keys error

I am trying to parse out all keys from a json data.

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "History.aspx/GetFTEData",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var returnedstring = data.d;
                var colHeader = Object.keys(data[0]); <---- error line

            }
        });
    });
</script>

However, var colHeader = Object.keys(data[0]); this doesn't work while running it with my IDE (VS2015) on my IE 11 or Firefox browser even though it works in the jsfiddle example:-

https://jsfiddle.net/qpu3cn5u/

The error message:- 0x800a138f - JavaScript runtime error: Object.keys: argument is not an Object

What alternatives do I have? such that I can only parse the keys out as column names for an html table that I am trying to populate with values.

example of data:-

var data = `[{"Customer Name":"XXXX","1999":76.000,"2000":68.000,"2001":49.000,"2002":41.000,"2003":47.000,"2004":56.000,"2005":33.000,"2006":51.000,"2007":56.000,"2008":52.000,"2009":55.000,"2010":52.000,"2011":57.000,"2012":55.000,"2013":93.000,"2014":92.000,"2015":62.000,"2016":71.833},{"Customer Name":"YYYYY","1999":29.000,"2000":27.000,"2001":35.000,"2002":37.000,"2003":32.000,"2004":29.000,"2005":44.000,"2006":49.000,"2007":69.000,"2008":109.000,"2009":108.000,"2010":150.000,"2011":189.000,"2012":215.000,"2013":53.000,"2014":78.000,"2015":65.000,"2016":63.000},{"Customer Name":"ZZZZ","1999":0.000,"2000":0.000,"2001":0.000,"2002":0.000,"2003":0.000,"2004":0.000,"2005":0.000,"2006":0.000,"2007":0.000,"2008":0.000,"2009":0.000,"2010":0.000,"2011":0.000,"2012":28.000,"2013":36.000,"2014":59.000,"2015":90.000,"2016":94.000},{"Customer Name":"AAAAA","1999":0.000,"2000":0.000,"2001":0.000,"2002":0.000,"2003":0.000,"2004":0.000,"2005":0.000,"2006":0.000,"2007":0.000,"2008":0.000,"2009":0.000,"2010":0.000,"2011":0.000,"2012":18.000,"2013":18.000,"2014":18.000,"2015":19.000,"2016":18.000}]`

javascript

jquery

json

asked on Stack Overflow Aug 28, 2017 by

Philo • edited Aug 28, 2017 by

Philo

2 Answers

It seems the problem is that the data[0] is still in its JSON state. This often happens when you encode individual objects, and then encode their enclosing array. The individual objects get double-encoded.

As a test, try this:

var parsed = JSON.parse(data[0]);
console.log(Object.keys(parsed));

If this shows the result that you wanted, then that tells you the double-encoding is the problem.

However, parsing it again is not the solution. You need to fix this on the server that's generating the JSON data so that it doesn't get double-encoded.

answered on Stack Overflow Aug 28, 2017 by

spanky

If you have to support older browsers you can always try and find examples of how to perform similar tasks using older styles/APIs. For example you can loop over JavaScrip object props by doing something like this:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Similar question/code example found here.

However, Object.keys() is support is all major browsers. Including IE11, reference here.

answered on Stack Overflow Aug 28, 2017 by

stetson

User contributions licensed under CC BY-SA 3.0