How to get values from json array in a javascript

Question

I'm trying to get values from json array inside a javascript. Below is the part of my javascript file. I'm using jsondata.value to get the values. It's displaying the json data correctly on the console, but jsondata.value is not working for getting the values.

Answer 1

I'm guessing that your "jsondata" is text in the DOM? If so, you want to grab the "string" in the DOM and Parse it into a valid JavaScript Object. To do so, you need to grab it appropriately:

var jsondata = document.getElementById("jsonArray").value;

Then you need to parse it

var jsondataObj = JSON.parse(jsondata);

At this point, jsondataObj is your data. If you want to populate this into your grid, simply inject it the way you wanted to. There is no need for XHRHttpRequest since you already injected your data into the DOM:

var gridOptions = {  ... [your options here] };

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');

    new agGrid.Grid(gridDiv, gridOptions);

    var jsondata = document.getElementById("jsonArray").value;

    var jsondataObj = JSON.parse(jsondata);

    function isNumeric(n) { 
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    var parsedData = jsondataObj.map(function(obj) {
        return Object.keys(obj).reduce(function(memo, key) {
            var value = obj[key];
            memo[key] = isNumeric(value) ? Number(value) : value;

            return memo;
        }, {})
    })

    console.log(parsedData);

    gridOptions.api.setRowData(parsedData);

});