"Custom Usage Data" script only extract the first data

Hi,

I stumbled or a detail in the Custom Usage Data-example.

In the settings of “Can I use” it is possible to import multiple sources. If for example I first import data by geography and afterwards via Analytics.

The content of localStorage[“usage-data-by-id”] looks similar to this:

{
  "region.DE": {
    "name": "Germany",
    "id": "DE",
    "type": "region",
    "source": "statcounter",
    "dataByBrowser": {
      "SHORTEN": "..."
    },
    "meta": {
      "access_date": "2018-02-05",
      "month": "2018-01"
    },
    "uid": "region.DE"
  },
  "custom.6543947|undefined": {
    "name": "www.example.de",
    "id": "6543947|undefined",
    "type": "custom",
    "source": "google_analytics",
    "dataByBrowser": {
      "SHORTEN": "..."
    },
    "meta": {
      "start_date": "2018-01-24",
      "end_date": "2018-02-22"
    },
    "uid": "custom.6543947|undefined"
  }
}

In this case the example script for extracting the JSON from the local storage only saves the first key. In my example the imported data from the country.

[jstrangfeld]

LGTM. I wasn’t aware of the structure of the localStorage being different. This simple UI is going to make the download process much easier! Good work!

[vaxul]

PR ready.

Source:

javascript:(function(){
	var data = JSON.parse(localStorage['usage-data-by-id']),
		backdrop = document.createElement('div');
		parent = document.createElement('div');

	backdrop.setAttribute('style', 'background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10');
	parent.setAttribute('style', 'background:#fff;color:#000;padding:50px;top:0;left:0');
	
	for(var dataKey in data){
		var link=document.createElement("a");
		
		link.setAttribute("style", "display:block;margin:10px 0");
		link.setAttribute("download", "browserslist-stats.json");
		link.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(JSON.stringify(data[dataKey])));
		link.innerHTML='Get data: ' + data[dataKey].name;
		
		parent.appendChild(link);
		
		link.addEventListener('click', function() {
			document.body.removeChild(backdrop);
		});
	}
	
	document.body.appendChild(backdrop);
	backdrop.appendChild(parent);
	backdrop.addEventListener('click', function() {
		document.body.removeChild(backdrop);
	});
})();