如何通过键和值以指定的方式获取对象值

Question

i wanted print the string in a specifed manner but i'm not finding any convenient solution.

I'm expecting below result:

  <h1>new_data</h1> <h4>print:</h4> <span>inv_val_ads_details_brand,auth_sign</span> <h4>report:</h4> <span>value_ads_report,per_day_volume_billing</span> <h4>media:</h4> <span>media,auto_generated_media</span> <hr> <h1>old_data</h1> <h4>media:</h4> <span>meta_data</span> <h4>order:</h4> <span>cg_counter,sub_vertical</span> 

here is what i have tried:

  var data = { "new_data": { "print": { "inv_val_ads_details_brand": true, "auth_sign": false }, "report": { "value_ads_report": true, "per_day_volume_billing": false }, "media": { "media": false, "auto_generated_media": true } }, "old_data": { "media": { "meta_data": false }, "order": { "cg_counter": true, "sub_vertical": false } } }; var str = ''; Object.keys(data).map(function(key) { str += '<h1>'+key+'</h1>'; console.log('main heading...',key); Object.keys(data[key]).map(function(val){ console.log('values',val); }); }); 

Question : snippet 1 output i'm expecting

Please help me thanks in advance !!!!!

Answer 1

As you don't return anything, use forEach instead of map , and doing something like this would give the output you asked for

Stack snippet

 var data = { "new_data": { "print": { "inv_val_ads_details_brand": true, "auth_sign": false }, "report": { "value_ads_report": true, "per_day_volume_billing": false }, "media": { "media": false, "auto_generated_media": true } }, "old_data": { "media": { "meta_data": false }, "order": { "cg_counter": true, "sub_vertical": false } } }; var str = ''; Object.keys(data).forEach(function(key) { str += '<h1>' + key + '</h1>'; Object.keys(data[key]).forEach(function(val) { str += '<h4>' + val + ':</h4>'; Object.keys(data[key][val]).forEach(function(val2, idx) { if (idx > 0) str += ','; str += '<span>' + val2 + '</span>'; }); }); }); document.body.innerHTML = str;