Javascript JSON transverse with hierarchical output

Question

Im trying to read a JSON schema but can't seem to work out how to output into hierarchical structure with all the previous objects etc.

This is JSON Response Scheme

{
"Shopping": {
"Orders": {
  "OrderInfo": {
    "OrderNumber": "D0102864",
    "ContactID": "AS76372",
    "OrderDate": "01/01/2018",
    "Billing": {
      "BillingID": "B673472",
      "Name": "Fred Smith"
    },
    "Delivery": {
      "DeliveryID": "D769397",
      "Name": "Joe Blogg"
    },
    "Discount": {
      "DiscountValue": "10"
    },
    "OrderProduct": {
      "NumberofItems": "1",
      "Items": {
        "Item": {
          "ProductID": "P5763868",
          "ItemName": "Big Blue Box",
          "Price": "10",
        }
      }
    }
   }
  }
 }
}

With multiple items array is added []

{
 "Shopping": {
"Orders": {
  "OrderInfo": {
    "OrderNumber": "D0102864",
    "ContactID": "AS76372",
    "OrderDate": "01/01/2018",
    "Billing": {
      "BillingID": "B673472",
      "Name": "Fred Smith"
    },
    "Delivery": {
      "DeliveryID": "D769397",
      "Name": "Joe Blogg"
    },
    "Discount": {
      "DiscountValue": "10"
    },
    "OrderProduct": {
      "NumberofItems": "2",
      "Items": {
        "Item": [
          {
          "ProductID": "P5763868",
          "ItemName": "Big Blue Box",
          "Price": "10",
          },
          {
          "ProductID": "P57638262",
          "ItemName": "Big Red Box",
          "Price": "20",
          }
        ]
      }
    }
   }
  }
 }
}

Within the following javascript function, Im try to generate the output structure Object_nestedObject_Keyname like the example further below. Just a note, the JSON is an Ajax call along with other data, but i need to transverse the shopping object only.

 function js_traverse(o) {
 var type = typeof o 
 if (type == "object") {

    for (var key in o) {

        console.log("key: ", key)
        js_traverse(o[key])
    }
  } else {
    console.log("value: ",o)
  }
 }

 js_traverse(data['Shopping']); <- above scheme 

and Im trying to create the following output in console log sort of a tree structure

 Orders
 Orders_OrdersInfo
 Orders_OrdersInfo_OrderNumber
 Orders_OrdersInfo_ContactID
 Orders_OrdersInfo_OrderDate
 Orders_OrdersInfo_Billing
 Orders_OrdersInfo_Billing_BillingID
 Orders_OrdersInfo_Billing_Name
 Orders_OrdersInfo_Delivery
 Orders_OrdersInfo_Delivery_DeliveryID
 Orders_OrdersInfo_Delivery_Name
 Orders_OrdersInfo_Discount
 Orders_OrdersInfo_Discount_DiscountValue
 Orders_OrdersInfo_OrderProduct
 Orders_OrdersInfo_OrderProduct_NumberofItems
 Orders_OrdersInfo_OrderProduct_Items
 Orders_OrdersInfo_OrderProduct_Items_Item
 Orders_OrdersInfo_OrderProduct_Items_Item_ProductID_1 <-- increment number at end if multiple item
 Orders_OrdersInfo_OrderProduct_Items_Item_ItemName_1 <-- increment at end if multiple item
 Orders_OrdersInfo_OrderProduct_Items_Item_Price_1 <-- increment at end if multiple item

Answer 1

You could use a recursive approach by checking the value and the type then take either kthe keys or display the path of the object.

function getKeys(object) {
    function iter(o, p) {
        if (o && typeof o === 'object') {
            Object.keys(o).forEach(k => iter(o[k], p.concat(k)));
        } else {
            console.log(p.join('_'));
        }
    }
    iter(object, []);
}

var object = { Shopping: { Orders: { OrderInfo: { OrderNumber: "D0102864", ContactID: "AS76372", OrderDate: "01/01/2018", Billing: { BillingID: "B673472", Name: "Fred Smith" }, Delivery: { DeliveryID: "D769397", Name: "Joe Blogg" }, Discount: { DiscountValue: "10" }, OrderProduct: { NumberofItems: "2", Items: { Item: [{ ProductID: "P5763868", ItemName: "Big Blue Box", Price: "10" }, { ProductID: "P57638262", ItemName: "Big Red Box", Price: "20" }] } } } } } };

getKeys(object);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Additional function for generatoig an array/object out of a given array with keys and a value. This works with a check if the given key is a number.

function setValue(object, path, value) {
    var last = path.pop();

    path.reduce((o, k, i, kk) => o[k] = o[k] || (isFinite(i + 1 in kk ? kk[i + 1] : last) ? [] : {}), object)[last] = value;
}

function getValues(object) {
    function iter(o, p) {
        if (o && typeof o === 'object') {
            Object.keys(o).forEach(k => iter(o[k], p.concat(k)));
        } else {
            result.push([p, o]);
        }
    }

    var result = [];
    iter(object, []);
    return result;
}

var object = { Shopping: { Orders: { OrderInfo: { OrderNumber: "D0102864", ContactID: "AS76372", OrderDate: "01/01/2018", Billing: { BillingID: "B673472", Name: "Fred Smith" }, Delivery: { DeliveryID: "D769397", Name: "Joe Blogg" }, Discount: { DiscountValue: "10" }, OrderProduct: { NumberofItems: "2", Items: { Item: [{ ProductID: "P5763868", ItemName: "Big Blue Box", Price: "10" }, { ProductID: "P57638262", ItemName: "Big Red Box", Price: "20" }] } } } } } },
    values = getValues(object),
    objectFromValues = {};

values.forEach(([keys, value]) => setValue(objectFromValues, keys, value));

console.log(objectFromValues);
console.log(values)

.as-console-wrapper { max-height: 100% !important; top: 0; }