1

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>

Improve this question
1
  • You can use array.filter method to get only logo part of object key. Commented Jan 15, 2018 at 5:30

3 Answers 3

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Perfect, just had to remove 'png' from the logo.src.
0

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();
Improve this answer

1 Comment

This looks like the best solution, yet I cannot get this to work on the logo object in my JSON file to return the image name for multiple types of browser. Could you copy my snippet from above to use in this answer?
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.