Darren
Reputation: 2290
Get only part of an Object from JSON data
I need help in defining only part of the logo object as logoName in my JSON Data
{
"2017-12-17":[
],
"2017-12-18":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":5,
"nb_users":0,
"max_actions":5,
"sum_visit_length":184,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2017-12-19":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":7,
"nb_actions":29,
"nb_users":0,
"max_actions":15,
"sum_visit_length":4195,
"bounce_count":2,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
},
{
"label":"Mobile Safari",
"nb_uniq_visitors":2,
"nb_visits":2,
"nb_actions":2,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":2,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/MF.png",
"segment":"browserCode==MF"
}
],
"2017-12-20":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":4,
"nb_users":0,
"max_actions":4,
"sum_visit_length":794,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2017-12-21":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":14,
"nb_users":0,
"max_actions":14,
"sum_visit_length":287,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2017-12-22":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":2,
"nb_actions":9,
"nb_users":0,
"max_actions":7,
"sum_visit_length":219,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2017-12-23":[
],
"2017-12-24":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":12,
"nb_users":0,
"max_actions":12,
"sum_visit_length":480,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2017-12-25":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":3,
"nb_actions":4,
"nb_users":0,
"max_actions":2,
"sum_visit_length":7,
"bounce_count":2,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2017-12-26":[
],
"2017-12-27":[
{
"label":"Mobile Safari",
"nb_uniq_visitors":9,
"nb_visits":9,
"nb_actions":9,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":9,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/MF.png",
"segment":"browserCode==MF"
},
{
"label":"Android Browser",
"nb_uniq_visitors":4,
"nb_visits":4,
"nb_actions":4,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":4,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/AN.png",
"segment":"browserCode==AN"
},
{
"label":"Internet Explorer",
"nb_uniq_visitors":4,
"nb_visits":4,
"nb_actions":4,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":4,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/IE.png",
"segment":"browserCode==IE"
},
{
"label":"Chrome",
"nb_uniq_visitors":3,
"nb_visits":3,
"nb_actions":3,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":3,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
},
{
"label":"Chrome Mobile",
"nb_uniq_visitors":2,
"nb_visits":2,
"nb_actions":2,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":2,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CM.png",
"segment":"browserCode==CM"
},
{
"label":"Firefox",
"nb_uniq_visitors":2,
"nb_visits":2,
"nb_actions":2,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":2,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/FF.png",
"segment":"browserCode==FF"
},
{
"label":"Opera",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":1,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":1,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/OP.png",
"segment":"browserCode==OP"
},
{
"label":"Safari",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":1,
"nb_users":0,
"max_actions":1,
"sum_visit_length":0,
"bounce_count":1,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/SF.png",
"segment":"browserCode==SF"
}
],
"2017-12-28":[
],
"2017-12-29":[
],
"2017-12-30":[
],
"2017-12-31":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":6,
"nb_users":0,
"max_actions":6,
"sum_visit_length":41,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2018-01-01":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":2,
"nb_actions":9,
"nb_users":0,
"max_actions":7,
"sum_visit_length":103,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2018-01-02":[
],
"2018-01-03":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":3,
"nb_actions":6,
"nb_users":0,
"max_actions":3,
"sum_visit_length":250,
"bounce_count":1,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
],
"2018-01-04":[
],
"2018-01-05":[
]
}
How can I define only the filename, for example in the above JSON the logo filename for Chrome Browsers is CH.png?
I would like to get the object but return only the filename for use in my JS as
logo.src = 'https://example.com/img/browser-icons/' + logoName + '.png';
Alternatively, the same could be done with the object segment, returning for example CH from browserCode==CH.
My full code is displaying the JSON data as a table
$.getJSON('https://discovrbookings.innocraft.cloud/index.php?module=API&method=DevicesDetection.getBrowsers&idSite=2&period=day&date=2017-12-17,2018-01-05&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff', (browser_data) => {
Array.prototype.groupBy = function(key) {
var path = key.split('.');
var result = {};
try {
this.forEach(function(item) {
// es6: path.reduce((a, b) => a[b], item)
type = path.reduce(function(a, b) {
return a[b]
}, item) || 'null';
if (!result[type])
result[type] = [];
result[type].push(item);
});
return result;
} catch (err) {
console.log(err);
return {};
}
};
function getPropertySum(key, arr) {
return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
}
// one array of all dates
let browserCode = ('segment');
let flattenArr = [].concat.apply([], Object.values(browser_data));
// object of grouped dates by device
let groups = flattenArr.groupBy('label');
let table = document.getElementById('browserTable');
table.innerHTML = '';
Object.keys(groups).forEach(function(label) {
let row = document.createElement('tr');
let logw = document.createElement('td');
let logo = document.createElement('img');
let lab = document.createElement('td');
let nbv = document.createElement('td');
let nbu = document.createElement('td');
row.appendChild(logw);
row.appendChild(lab);
row.appendChild(nbv);
row.appendChild(nbu);
logw.appendChild(logo);
logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/browser-icons/' + logoName + '.png';
lab.innerHTML = label;
nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
table.appendChild(row);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="browserTable"></table>Upvotes: 1
Views: 95
Answers (3)
Ahmad
Reputation: 12737
Why don't you use Object.keys to iterate through your large JSON object?
var data = {
"2017-12-17":[
],
"2017-12-18":[
{
"label":"Chrome",
"nb_uniq_visitors":1,
"nb_visits":1,
"nb_actions":5,
"nb_users":0,
"max_actions":5,
"sum_visit_length":184,
"bounce_count":0,
"nb_visits_converted":0,
"logo":"plugins\/Morpheus\/icons\/dist\/browsers\/CH.png",
"segment":"browserCode==CH"
}
]
}
var keys = Object.keys(data); // this will output ['2017-12-17','2017-12-18',..]
keys.forEach(function(d){
data[d].forEach(function(i){
console.log(i.logo);
});
});
Output
plugins/Morpheus/icons/dist/browsers/CH.png
plugins/Morpheus/icons/dist/browsers/MF.png
plugins/Morpheus/icons/dist/browsers/CH.png
plugins/Morpheus/icons/dist/browsers/MF.png
plugins/Morpheus/icons/dist/browsers/AN.png
plugins/Morpheus/icons/dist/browsers/IE.png
plugins/Morpheus/icons/dist/browsers/CH.png
plugins/Morpheus/icons/dist/browsers/CM.png
plugins/Morpheus/icons/dist/browsers/FF.png
plugins/Morpheus/icons/dist/browsers/OP.png
plugins/Morpheus/icons/dist/browsers/SF.png
plugins/Morpheus/icons/dist/browsers/CH.png
Upvotes: 0
nazim
Reputation: 1579
You need to get the logo string get the last part with the file name assigned to the variable logoName. I have added a snippet towards the bottom of your code.
$.getJSON('https://discovrbookings.innocraft.cloud/index.php?module=API&method=DevicesDetection.getBrowsers&idSite=2&period=day&date=2017-12-17,2018-01-05&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff', (browser_data) => {
Array.prototype.groupBy = function(key) {
var path = key.split('.');
var result = {};
try {
this.forEach(function(item) {
// es6: path.reduce((a, b) => a[b], item)
type = path.reduce(function(a, b) {
return a[b]
}, item) || 'null';
if (!result[type])
result[type] = [];
result[type].push(item);
});
return result;
} catch (err) {
console.log(err);
return {};
}
};
function getPropertySum(key, arr) {
return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
}
// one array of all dates
let browserCode = ('segment');
let flattenArr = [].concat.apply([], Object.values(browser_data));
// object of grouped dates by device
let groups = flattenArr.groupBy('label');
let table = document.getElementById('browserTable');
table.innerHTML = '';
Object.keys(groups).forEach(function(label) {
let row = document.createElement('tr');
let logw = document.createElement('td');
let logo = document.createElement('img');
let lab = document.createElement('td');
let nbv = document.createElement('td');
let nbu = document.createElement('td');
row.appendChild(logw);
row.appendChild(lab);
row.appendChild(nbv);
row.appendChild(nbu);
logw.appendChild(logo);
// Get the logo property and use split on the string
logoProperty = getPropertySum('logo',groups[label]);
var logoPropSplit = logoProperty.split("/");
var logoName = logoPropSplit [logoPropSplit.length-1];
// End of edit
logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/browser-icons/' + logoName + '.png';
lab.innerHTML = label;
nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
table.appendChild(row);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="browserTable"></table>Upvotes: 1
guest271314
Reputation: 1
To get the file name you can .split() the logo property value by "/", .pop() the array
let url = "plugins\/Morpheus\/icons\/dist\/browsers\/CH.png";
let logoName = url.split("/").pop();
Upvotes: 0
Related Questions
- How to access 'Object' portion of JSON using Jquery?
- Extract part of a Json object using Javascript
- How to grab part of JSON string?
- how get values of part of json object
- How do I get portions of a json?
- Access to a certain part of JSON data with jQuery
- How can I get specific data from JSON?
- Get specific data from json
- Extracting specific data from json using jquery
- how do I access a bit of the JSON with jQuery?