Develop Reference

Can't acces my JSON files with ES6

I'm working on a little chat application where you can click on different contacts and see / send messages.
I have this users.json file with the contacts:
{
"results":[
{
"gender":"female",
"name":{
"title":"Ms",
"first":"Leonie",
"last":"Otto"
},
"location":{
"street":"3076 raiffeisenstraße",
"city":"meißen",
"state":"sachsen-anhalt",
"postcode":62480
},
"email":"leonie.otto#example.com",
"login":{
"username":"bigwolf465",
"password":"stephane",
"salt":"Ip5qcgs5",
"md5":"fe5df54750c64b7c5d54c92f0cb91f11",
"sha1":"17d255fb64135b5e247a4ef5554557a1d2a8881e",
"sha256":"341d750fce611b853b4f27d485f10ef9f9c3add4de12a7fbf838a1fd2d5168a9"
},
"dob":"1955-01-08 01:03:55",
"registered":"2012-07-07 16:42:10",
"phone":"0265-7006038",
"cell":"0178-0561111",
"id":{
"name":"",
"value":null
},
"picture":{
"large":"https://randomuser.me/api/portraits/women/8.jpg",
"medium":"https://randomuser.me/api/portraits/med/women/8.jpg",
"thumbnail":"https://randomuser.me/api/portraits/thumb/women/8.jpg"
},
"nat":"DE",
"status": "online"
},
{
"gender":"female",
"name":{
"title":"Miss",
"first":"Olive",
"last":"Wright"
},
"location":{
"street":"2912 manukau road",
"city":"timaru",
"state":"otago",
"postcode":30721
},
"email":"olive.wright#example.com",
"login":{
"username":"brownrabbit413",
"password":"derek",
"salt":"gRxy7hHq",
"md5":"dc214ffe467373790c8500abd1ff0f8f",
"sha1":"7b7847e1a9e3b3de081e3eeebf972dc5d2b5527a",
"sha256":"1763dff5c43e1cea431d1ad8c1648c586af9d1e1410001d743078af143ce30b9"
},
"dob":"1982-07-01 12:12:29",
"registered":"2016-03-25 19:15:33",
"phone":"(003)-127-5232",
"cell":"(133)-307-2001",
"id":{
"name":"",
"value":null
},
"picture":{
"large":"assets/img/users/233899238.jpg"
},
"nat":"NZ",
"status": "online"
}
I both put them in a list item where I show their name, username and profile picture. This all works out well.
The next I want is that if I click on the specific contact, it shows all their message history.
So as an example for the contact with the username bigwolf465 I use this json file:
{
"ok": true,
"messages": [
{
"type": "message",
"user": "me",
"text": "Can I have this?",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "No.",
"ts": "1512085950.218404"
},
{
"type": "message",
"user": "me",
"text": "Ah, perhaps I’ve miscommunicated. I’m asking for it because I want it.",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "I understood that, actually.",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "me",
"text": "I think maybe you’re not hearing me. I’d like it because I want it.",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "There's no problem with my hearing. The problem is that your argument is, as the Romans would say:",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "Circulus in probando.",
"ts": "1512085950.000216"
}
],
"pin_count": 0
}
I also want to make a list item for these messages, but it doens't seem to work out. This is the JS code I have right now:
const handleContactClick = ({
currentTarget: $li
}) => {
loadContactDetails($li);
};
const loadContactDetails = $li => {
fetch(`./assets/data/messages/${$li.dataset.username}.json`)
.then(r => r.json())
.then(parseContactDetail);
}
const parseContactDetail = messages => {
const $container = document.querySelector(`.messages-list`);
const $li = document.createElement(`li`);
$li.classList.add(`reply`);
$container.appendChild($li);
const $img = document.createElement(`img`);
$img.setAttribute(`src`, `assets/img/me.png`);
$li.appendChild($img);
const $p = document.createElement(`p`);
$p.textContent = `${messages.text}`;
$li.appendChild($p);
}
When I click on the specific contact, it just adds messages with the text "undefined". I don't really know how to fix it, it seems I can't get acces to the JSON file.

Here's the function, fixed:
const parseContactDetail = person => {
const $container = document.querySelector(`.messages-list`);
person.messages.forEach(m => {
const $li = document.createElement(`li`);
$li.classList.add(`reply`);
$container.appendChild($li);
const $img = document.createElement(`img`);
$img.setAttribute(`src`, `assets/img/me.png`);
$li.appendChild($img);
const $p = document.createElement(`p`);
$p.textContent = `${m.text}`;
$li.appendChild($p);
});
}
The function now properly grabs .messages from the passed data object, then loops over the array, creating a <li> for each element.

How click to open popup Organisational Chart Plugin With jQuery

this is tree view on my website based on jquery org chart plugin, this tree created dynamically and also create children.
code is :
$(function() {
var datascource = {
'name': 'Kirby Cochran',
'title': '5061',
'children': [
{
"name": "Sharon Edwards",
"title": "11454",
"children": [
{
"name": "Kirby Cochran",
"title": "5061-kr",
"children": [
{
"name": "Michael Wach",
"title": "5063"
}
]
},
{
"name": "Phil Ungricht",
"title": "6189",
"children": [
{
"name": "Elaine 2 Cochran",
"title": "10238"
}
]
},
{
"name": "Roberto Montero",
"title": "5371"
}
]}]};
var oc = $('#chart-container').orgchart({
'data' : datascource,
'nodeContent': 'title',
'draggable': true,
'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
return false;
}
return true;
}
});
oc.$chart.on('nodedropped.orgchart', function(event) {
console.log('draggedNode:' + event.draggedNode.children('.title').text()
+ ', dragZone:' + event.dragZone.children('.title').text()
+ ', dropZone:' + event.dropZone.children('.title').text()
);
});});
here requirement is if clicked any boxes open the popup and show details of customers. org chart

Here is some code snippet to load a pop-up
$(.node).click(function(){
var id = $(this).attr('id');
// use ajax here and getdata using id then display a modal and populate it
});

How to iterate through deeply nested objects inside of a JSON?

I know there are plenty of questions about iterating through JSON objects but I haven't found one that quite relates to my exact problem. This is the JSON that I'm trying to iterate through:
psinsights = {
"kind": "pagespeedonline#result",
"id": "/speed/pagespeed",
"responseCode": 200,
"title": "PageSpeed Home",
"score": 90,
"pageStats": {
"numberResources": 22,
"numberHosts": 7,
"totalRequestBytes": "2761",
"numberStaticResources": 16,
"htmlResponseBytes": "91981",
"cssResponseBytes": "37728",
"imageResponseBytes": "13909",
"javascriptResponseBytes": "247214",
"otherResponseBytes": "8804",
"numberJsResources": 6,
"numberCssResources": 2
},
"formattedResults": {
"locale": "en_US",
"ruleResults": {
"AvoidBadRequests": {
"localizedRuleName": "Avoid bad requests",
"ruleImpact": 0.0
},
"MinifyJavaScript": {
"localizedRuleName": "Minify JavaScript",
"ruleImpact": 0.1417,
"urlBlocks": [
{
"header": {
"format": "Minifying the following JavaScript resources could reduce their size by $1 ($2% reduction).",
"args": [
{
"type": "BYTES",
"value": "1.3KiB"
},
{
"type": "INT_LITERAL",
"value": "0"
}
]
},
"urls": [
{
"result": {
"format": "Minifying $1 could save $2 ($3% reduction).",
"args": [
{
"type": "URL",
"value": "http://code.google.com/js/codesite_tail.pack.04102009.js"
},
{
"type": "BYTES",
"value": "717B"
},
{
"type": "INT_LITERAL",
"value": "1"
}
]
}
},
{
"result": {
"format": "Minifying $1 could save $2 ($3% reduction).",
"args": [
{
"type": "URL",
"value": "http://www.gmodules.com/ig/proxy?url\u003dhttp%3A%2F%2Fjqueryjs.googlecode.com%2Ffiles%2Fjquery-1.2.6.min.js"
},
{
"type": "BYTES",
"value": "258B"
},
{
"type": "INT_LITERAL",
"value": "0"
}
]
}
}
]
}
]
},
"SpriteImages": {
"localizedRuleName": "Combine images into CSS sprites",
"ruleImpact": 0.0
}
}
},
"version": {
"major": 1,
"minor": 11
}
};
Now, I'm trying to write a function that iterates through all of the ruleResults objects and returns an array of the localizedRuleName properties. According to the JSON, ruleResults has three member objects (AvoidBadRequests, MinifyJavaScript, and SpriteImages). Each of these has a localizedRuleName property I'm trying to access, but when I print out my array, it's blank. Here's how I've written my function:
function ruleList(results) {
var ruleArray = [];
for(var ruleName in results.formattedResults.ruleResults){
ruleArray[counter] = results.formattedResults.ruleResults[ruleName].localizedRuleName;
}
return ruleArray;
}
console.log(ruleList(psinsights));
Can you guys help me get on the right track? I used basically this same method to iterate through the pageStats of the JSON and it worked perfectly. I'm not sure why I can't get it to work with these deeper nested objects and properties.

your problem is not your iteration, but your undefined variable "counter".
Instead of using a counter can use the "push" function:
function ruleList(results) {
var ruleArray = [];
for(var ruleName in results.formattedResults.ruleResults){
ruleArray.push(results.formattedResults.ruleResults[ruleName].localizedRuleName);
}
return ruleArray;
}
fiddle: https://jsfiddle.net/fo9h56gh/
Hope this helps.

you're probably getting a javascript error since counter is not defined. you can try this:
function ruleList(results) {
var ruleArray = [];
var counter = 0;
for(var ruleName in results.formattedResults.ruleResults){
ruleArray[counter] = results.formattedResults.ruleResults[ruleName].localizedRuleName;
counter++;
}
return ruleArray;
}

Reading a JSON output in JavaScript with a lot of objects

This is my JSON output:
[
{
"Business": [
{
"id": "5739"
},
{
"userid": ""
},
{
"name": "Ben Electric"
},
{
"description": ""
},
{
"address": ""
},
{
"email": "*****#gmail.com"
},
{
"phone2": "050*****88"
},
{
"phone3": ""
},
{
"mobile": "050****88"
},
{
"opentimes": ""
},
{
"services": ""
},
{
"places": ""
},
{
"logo": null
},
{
"image": null
},
{
"video": ""
},
{
"owner_name": "Ben Brant"
},
{
"owners": "1"
},
{
"userpic": "http://graph.facebook.com/****/picture"
},
{
"circle": "3"
},
{
"fc": "0"
},
{
"rating_friends": ""
},
{
"rating_global": "3.3333"
},
{
"advice": ""
},
{
"subscription": "none"
}
]
},
{
"Business": [
{
"id": "5850"
},
{
"userid": ""
},
{
"name": "Bla Bla"
},
{
"description": ""
},
{
"address": ""
},
{
"email": "*****#gmail.com"
},
{
"phone2": ""
},
{
"phone3": ""
},
{
"mobile": "0*****995"
},
{
"opentimes": ""
},
{
"services": ""
},
{
"places": ""
},
{
"logo": null
},
{
"image": null
},
{
"video": ""
},
{
"owner_name": "Ben VBlooo"
},
{
"owners": "1"
},
{
"userpic": "http://graph.facebook.com/******/picture"
},
{
"circle": "3"
},
{
"fc": "0"
},
{
"rating_friends": ""
},
{
"rating_global": "2.0000"
},
{
"advice": ""
},
{
"subscription": "none"
}
]
},
{
"Info": {
"message": "No user for the business"
}
},
{
"OK": {
"message": "By Circle"
}
}
]
I'm trying to get the objects in javascript in this way but it doesnt work, should i loop through each Business object?? is there a way to access the real data objects directly?
Here's what I'm trying:
$.ajax({
type: 'POST',
url: 'BLABLA',
data: { BLABLA },
dataType: 'json',
success: function( resp ) {
if(resp.length == 0) {
$('.searchol').append('<li>No results found.</li>');
return;
}
$.each(resp, function(index, element) {
$('.searchol').append('Users Picture: '+element.Business.userpic);
But I cant seem to get to the object?

I just tried this code using your sample json like that
$.each(resp, function(index,element){
$.each(element, function(ind,ele){
if(ele.length){
$.each(ele,function(ind,ele){
if(ele.userpic)
console.log(ele.userpic)
})
}
})
})

"Business" is referring to an array (square bracket), so element.Business.userpic does not exist (element.Business[0].userpic exists though). Depending on what you want to achieve, you'll either have to loop through Business or access userpic of a particular array item.

Your business object is a array of object
"Business": [
{
"id": "5850"
},
Check this JSFiddle script on how to read that
Sample output
Picture: undefined (index):192
Picture: http://graph.facebook.com/****/picture

This will help you out
$.each(resp, function(index, element) {
$('.searchol').append('Users Picture: '+element.Business["userpic"]);

Your JSON is weird. Instead of :
Business : [
{ id : 'id1' }
{ name : 'name1' }
]
Business[0].id // access id
Business[1].name // access name
Where you have to remember where each attribute is in the array (or loop over the array to find it), you should have:
Business : {
id : 'id1',
name : 'name1'
}
Business.id // access id
Business.name // access name
If you can't change the JSON, you can use the following 2 methods to quickly get a property of Business:
var propMap = {
id : 0,
userid : 1,
name : 2 // etc
}
function getBusinessProp(business, prop) {
return business[propMap[prop]][prop];
}
// usage :
$('.searchol').append('Users Picture: '+ getBusinessProp(element.Business, 'userpic'));
If your array can be missing some items or the items can be in a different order for each business, then you need to iterate to find the property you're interested in:
function getBusinessProp(business, prop) {
for (var i=0; i<business.length; i++) {
if (business[i].hasOwnProperty(prop)) {
return business[i][prop];
}
}
}
// same usage, no need for the map anymore
The second method is probably better because it won't break if you change the order of the array or add new items in the array, etc and the performance boost given by using the map is probably not enough to justify the added maintenance cost.

(Handlebarsjs templating) How to get data from external JSON source?

See this link: http://jsfiddle.net/Rousnay/FJzre/ it is working, the JSON data come trough http://json.virtuecenter.com/json-data/blogs/tags?callback=?
but it is not working when i want to get data from http://sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/GetMenuItems?callback=?
Can anyone help me with jsfiddle example. please.

The returned data is not valid to the template, when getting from "http://sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/GetMenuItems?callback=?" you end up with:
[
{
"text": "Home ",
"url": "/Default.aspx"
},
{
"text": "Events ",
"url": "/Event-List/"
},
{
"text": "Test",
"url": "/Pages/8276/Test/"
}
]
and when getting from "http://json.virtuecenter.com/json-data/blogs/tags?callback=?" you have:
{
"blogsTags": [
{
"tag":"GovernorBentley",
"count":1,
"separation_path":"\/blogs\/byTag\/GovernorBentley.html"
},
{
"tag":"Huntsville",
"count":1,
"separation_path":"\/blogs\/byTag\/Huntsville.html"
},
{
"tag":"Voting Responsibility",
"count":1,
"separation_path":"\/blogs\/byTag\/Voting Responsibility.html"
},
{
"tag":"Voting Rights",
"count":1,
"separation_path":"\/blogs\/byTag\/Voting Rights.html"
}
],
"pagination": {
"limit":20,
"total":4,
"page":1,
"pageCount":1
}
}
your template expects a "blogsTags" property.