Question

I’ve been banging my head against this for half the day today. I have nested JSON, that I would like to be able to just grab and parse each of the nodes into a separate ol, with the node name used in the first li as the title. I can parse the response just fine and iterate through it, but changing it to separate out the nodes into blocks is where I get stuck. This is my js so far:

function parseData(obj) {
            var newId = '';
            var hashId = '#pay-data';


            $.each(obj, function(key, val) {
                if(val && typeof val === "object") {
                    $('#pay-data').append('<ol>');
                    parseData(val);
                } else {
                    console.log(key + ' - ' + val);
                    $('#pay-data').append('<li>' + key + ' - ' + val + '</li>');
                }
            });
        }

And this is a sample of the JSON:

{
"success":true,
"payAndBenefits":{
"employers":[{
    "rewards":
        {
            "totalCompensationValue":1466.95,
            "otherDeductions":141.82,
            "netPay":605.18,
            "incomeTaxes":101,
            "governmentReqd":50,
            "employerRetirementContributions":90.12,
            "employerPaidBenefits":376.83,
            "employeeRetirementContributions":102
        },
        "pay":
            {
                "paySiteURL":"https://someurl.com",
                "payPeriodEnding":"2012-09-30",
                "payDate":"2012-10-01",
                "otherDeductions":[
            {
                "description":"G T L Offset",
                "amountYTD":45,
                "amountThisPeriod":6
            },
            {
                "description":"Before Tax Dent",
                "amountYTD":-900,
                "amountThisPeriod":-147.82
            },
            {
                "description":"Checking deposit",
                "amountYTD":-6668,
                "amountThisPeriod":-605.18
            }
        ],
        "netPayYTD":6668,
        "netPayThisPeriod":605.18,
        "incomeTaxesDeductions":[
            {
                "description":"Federal Income Tax",
                "amountYTD":-909,
                "amountThisPeriod":-101
            }
        ],
        "grossPayYTD":9800,
        "grossPayThisPeriod":1000,
        "governmentRequiredDeductions":[
            {
                "description":"Social Security Tax",
                "amountYTD":-450,
                "amountThisPeriod":-50
            }
        ],
        "employeeRetirementPlanContribDeductions":[
            {
                "description":"401(k)",
                "amountYTD":-918,
                "amountThisPeriod":-102
            }
        ],
        "earnings":[
            {
            "description":"Regular",
            "amountYTD":9000,
            "amountThisPeriod":1000
            },
            {
                "description":"Vacation",
                "amountYTD":800,
                "amountThisPeriod":null
            }
        ]
    },
    "employerName":"Company Name",

It seems like I should be able to object.name in here somewhere, but I’m totally stuck.

Answer 1

I guess you want something like this.

function parseData(obj, targetDOMElement) {

  $.each(obj, function(key, val) {

    if(val && typeof val === "object") {

      var newTarget = $('<ol>'); // create the new list item
      newTarget.append('<li>' + key + '</li>'); // append the title as you wanted
      targetDOMElement.append(newTarget);  // add it to the target container
      parseData(val, newTarget); // parse the children and set the created list as the new target

    } else {

      // or just add the key-value pair to the target
      targetDOMElement.append('<li>' + key + ' - ' + val + '</li>');

    }

  });

}