Develop Reference

Ngx-Charts show all x axis values but alternate x-axis labels

I am currently working on ngx charts, for examples i have 12 x-axis every values need to be plotted in graph, but only alternate x-axis label need to be displayed.
html code
<ngx-charts-area-chart [view]="view" [scheme]="colorScheme" [legend]="legend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
[xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [results]="multi" (select)="onSelect($event)">
</ngx-charts-area-chart>
data.ts
var multi = [ {
"name": "Belarus",
"series": [
{
"value": 5776,
"name": "Jan 19"
},
{
"value": 4299,
"name": "Feb 19"
},
{
"value": 3995,
"name": "Mar 19"
},
{
"value": 6597,
"name": "Apr 19"
},
{
"value": 4954,
"name": "May 19"
},
{
"name": "June 19",
"value": 3865
},
{
"name": "July 19",
"value": 2349
},
{
"name": "Aug 19",
"value": 6910
},
{
"name": "Sept 19",
"value": 6224
},
{
"name": "Oct 19",
"value": 4161
},
{
"name": "Nov 19",
"value": 4825
},
{
"name": "Dec 19",
"value": 3835
}
]},{
"name": "Croatia",
"series": [
{
"value": 2576,
"name": "Jan 19"
},
{
"value": 5427,
"name": "Feb 19"
},
{
"value": 3097,
"name": "Mar 19"
},
{
"value": 4385,
"name": "Apr 19"
},
{
"value": 4849,
"name": "May 19"
},
{
"name": "June 19",
"value": 2867
},
{
"name": "July 19",
"value": 6241
},
{
"name": "Aug 19",
"value": 6517
},
{
"name": "Sept 19",
"value": 3808
},
{
"name": "Oct 19",
"value": 2068
},
{
"name": "Nov 19",
"value": 5121
},
{
"name": "Dec 19",
"value": 3876
}
]}]
In the above data set in x-axis I need to plot all values in the graph but only alternate labels need to displayed. This need to be applied for all types of ngx charts.

AngularJS with Jquery Chosen Default Load

I'm using AngularJS and the jquery chosen plugin to populate a multiple select form. My Angular code has a service that is calling a node.js web service. The option list for the chosen select box is being populated from a json file while the value is being stored within model from the nodejs service. I've been using this link to guide me but now seem to be stuck.
I've included the code here.
My chosen options are being populated as such:
[
{"id": 1, "name": "00:00", "value": 0},
{"id": 2, "name": "00:15", "value": 900000},
{"id": 3, "name": "00:30", "value": 1800000}
...
]
But my model is being stored as:
meal.dinnerTimes = ["06:15","18:30"]
So when the model is loaded by the service and controller. The select box is always blank where I would expect to see
"06:15" and "18:30" already populated in this case
Any help would be appreciated

As you only have value with you while assigning model, use select as label for value in array syntax to have only value property assigned to the model.
Also note that you are not invoking callback function provided in MealSvc factory hence, value of model will never get set!
Plunker Demo
var app = angular.module("MealApp", ['MealService']);
var data = [{
"id": 1,
"name": "00:00",
"value": 0
}, {
"id": 2,
"name": "00:15",
"value": 900000
}, {
"id": 3,
"name": "00:30",
"value": 1800000
}, {
"id": 4,
"name": "00:45",
"value": 2700000
}, {
"id": 5,
"name": "01:00",
"value": 3600000
}, {
"id": 6,
"name": "01:15",
"value": 4500000
}, {
"id": 7,
"name": "01:30",
"value": 5400000
}, {
"id": 8,
"name": "01:45",
"value": 6300000
}, {
"id": 9,
"name": "02:00",
"value": 7200000
}, {
"id": 10,
"name": "02:15",
"value": 8100000
}, {
"id": 11,
"name": "02:30",
"value": 9000000
}, {
"id": 12,
"name": "02:45",
"value": 9900000
}, {
"id": 13,
"name": "03:00",
"value": 10800000
}, {
"id": 14,
"name": "03:15",
"value": 11700000
}, {
"id": 15,
"name": "03:30",
"value": 12600000
}, {
"id": 16,
"name": "03:45",
"value": 13500000
}, {
"id": 17,
"name": "04:00",
"value": 14400000
}, {
"id": 18,
"name": "04:15",
"value": 15300000
}, {
"id": 19,
"name": "04:30",
"value": 16200000
}, {
"id": 20,
"name": "04:45",
"value": 17100000
}, {
"id": 21,
"name": "05:00",
"value": 18000000
}, {
"id": 22,
"name": "05:15",
"value": 18900000
}, {
"id": 23,
"name": "05:30",
"value": 19800000
}, {
"id": 24,
"name": "05:45",
"value": 20700000
}, {
"id": 25,
"name": "06:00",
"value": 21600000
}, {
"id": 26,
"name": "06:15",
"value": 22500000
}, {
"id": 27,
"name": "06:30",
"value": 23400000
}, {
"id": 28,
"name": "06:45",
"value": 24300000
}, {
"id": 29,
"name": "07:00",
"value": 25200000
}, {
"id": 30,
"name": "07:15",
"value": 26100000
}, {
"id": 31,
"name": "07:30",
"value": 27000000
}, {
"id": 32,
"name": "07:45",
"value": 27900000
}, {
"id": 33,
"name": "08:00",
"value": 28800000
}, {
"id": 34,
"name": "08:15",
"value": 29700000
}, {
"id": 35,
"name": "08:30",
"value": 30600000
}, {
"id": 36,
"name": "08:45",
"value": 31500000
}, {
"id": 37,
"name": "09:00",
"value": 32400000
}, {
"id": 38,
"name": "09:15",
"value": 33300000
}, {
"id": 39,
"name": "09:30",
"value": 34200000
}, {
"id": 40,
"name": "09:45",
"value": 35100000
}, {
"id": 41,
"name": "10:00",
"value": 36000000
}, {
"id": 42,
"name": "10:15",
"value": 36900000
}, {
"id": 43,
"name": "10:30",
"value": 37800000
}, {
"id": 44,
"name": "10:45",
"value": 38700000
}, {
"id": 45,
"name": "11:00",
"value": 39600000
}, {
"id": 46,
"name": "11:15",
"value": 40500000
}, {
"id": 47,
"name": "11:30",
"value": 41400000
}, {
"id": 48,
"name": "11:45",
"value": 42300000
}, {
"id": 49,
"name": "12:00",
"value": 43200000
}, {
"id": 50,
"name": "12:15",
"value": 44100000
}, {
"id": 51,
"name": "12:30",
"value": 45000000
}, {
"id": 52,
"name": "12:45",
"value": 45900000
}, {
"id": 53,
"name": "13:00",
"value": 46800000
}, {
"id": 54,
"name": "13:15",
"value": 47700000
}, {
"id": 55,
"name": "13:30",
"value": 48600000
}, {
"id": 56,
"name": "13:45",
"value": 49500000
}, {
"id": 57,
"name": "14:00",
"value": 50400000
}, {
"id": 58,
"name": "14:15",
"value": 51300000
}, {
"id": 59,
"name": "14:30",
"value": 52200000
}, {
"id": 60,
"name": "14:45",
"value": 53100000
}, {
"id": 61,
"name": "15:00",
"value": 54000000
}, {
"id": 62,
"name": "15:15",
"value": 54900000
}, {
"id": 63,
"name": "15:30",
"value": 55800000
}, {
"id": 64,
"name": "15:45",
"value": 56700000
}, {
"id": 65,
"name": "16:00",
"value": 57600000
}, {
"id": 66,
"name": "16:15",
"value": 58500000
}, {
"id": 67,
"name": "16:30",
"value": 59400000
}, {
"id": 68,
"name": "16:45",
"value": 60300000
}, {
"id": 69,
"name": "17:00",
"value": 61200000
}, {
"id": 70,
"name": "17:15",
"value": 62100000
}, {
"id": 71,
"name": "17:30",
"value": 63000000
}, {
"id": 72,
"name": "17:45",
"value": 63900000
}, {
"id": 73,
"name": "18:00",
"value": 64800000
}, {
"id": 74,
"name": "18:15",
"value": 65700000
}, {
"id": 75,
"name": "18:30",
"value": 66600000
}, {
"id": 76,
"name": "18:45",
"value": 67500000
}, {
"id": 77,
"name": "19:00",
"value": 68400000
}, {
"id": 78,
"name": "19:15",
"value": 69300000
}, {
"id": 79,
"name": "19:30",
"value": 70200000
}, {
"id": 80,
"name": "19:45",
"value": 71100000
}, {
"id": 81,
"name": "20:00",
"value": 72000000
}, {
"id": 82,
"name": "20:15",
"value": 72900000
}, {
"id": 83,
"name": "20:30",
"value": 73800000
}, {
"id": 84,
"name": "20:45",
"value": 74700000
}, {
"id": 85,
"name": "21:00",
"value": 75600000
}, {
"id": 86,
"name": "21:15",
"value": 76500000
}, {
"id": 87,
"name": "21:30",
"value": 77400000
}, {
"id": 88,
"name": "21:45",
"value": 78300000
}, {
"id": 89,
"name": "22:00",
"value": 79200000
}, {
"id": 90,
"name": "22:15",
"value": 80100000
}, {
"id": 91,
"name": "22:30",
"value": 81000000
}, {
"id": 92,
"name": "22:45",
"value": 81900000
}, {
"id": 93,
"name": "23:00",
"value": 82800000
}, {
"id": 94,
"name": "23:15",
"value": 83700000
}, {
"id": 95,
"name": "23:30",
"value": 84600000
}, {
"id": 96,
"name": "23:45",
"value": 85500000
}];
app.directive('chosen', function() {
var linker = function(scope, element, attr) {
scope.$watch('availableTimes', function() {
element.triggerHandler('chosen:updated');
});
scope.$watch('MealSvc.get()', function() {
element.triggerHandler('chosen:updated');
});
element.chosen({
width: "95%"
});
};
return {
restrict: 'A',
link: linker
}
});
app.controller("MealCtrl", function MealCtrl($scope, $window, $http, MealSvc) {
$scope.times = [];
$scope.availableTimes = [];
$scope.fetchTimes = function() {
$scope.availableTimes = data;
}
$scope.fetchTimes();
MealSvc.get(function(res) {
$scope.times = res.dinnerTimes;
});
});
angular.module('MealService', []).factory('MealSvc', function($http) {
return {
get: function(response) {
response({
"name": "Second Tea",
"dinnerTimes": [46800000, 57600000]
})
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery#*"></script>
<link data-require="chosen#*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="MealApp" ng-controller="MealCtrl">
<div class="row">
<select data-placeholder="Select Dinner Time" multiple class="chzn-select" chosen ng-model="times" ng-options="times.value as times.name for times in availableTimes"></select>
</div>
</div>
</body>
</html>

Jquery Javascript object - compare and replace some of the values with another similar object

There is an Javascript object (formData) that I need to replace some of the values by comparing with another object (dataObject). The JSON for both objects is below. Now what I need is, snippet:
Main formData Object:
{
"name": "abNotes",
"label": "Ab Notes: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "Example Notes",
"active": true
}
I need to compare the "value" to the other dataObject by "name" property and replace if it's different.
dataObject to compare to:
{
"name": "abNotes",
"value": "Example Notes 123456"
}
So the replaced FormData object will be changed to:
{
"name": "abNotes",
"label": "Ab Notes: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "Example Notes 123456",
"active": true
}
Main object that needs to be replaced
JSON.stringify (formData);
form data::
{
"name": "Demo",
"fieldGroupList": [{
"name": "instructions",
"label": "Instructions",
"fieldList": [{
"name": "INSTRUCTION",
"instructionList": [{
"instructionText": "All enabled fields are required."
}],
"type": "INSTRUCTION"
}]
},
{
"name": "ab",
"label": "Ab",
"fieldList": [{
"name": "abDate",
"label": "Ab Date",
"type": "DATE",
"value": "1425186000000",
"active": true
},
{
"name": "abNotes",
"label": "Ab Notes: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "Example Notes",
"active": true
}]
},
{
"name": "Record",
"label": "Record",
"fieldList": [{
"name": "RecordNumber",
"label": "Record Number: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "1234567890",
"active": true
},
{
"name": "otherNumber",
"label": "Other: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "887766",
"active": true
},
{
"name": "eligibleAll",
"instructionList": [{
"instructionText": "Is eligible for ALL?"
}],
"type": "SINGLE_FROM_SET",
"value": "true",
"optionList": [{
"name": "Yes",
"value": "true"
},
{
"name": "No",
"value": "false"
}],
"active": true
},
{
"name": "exclusionReasonCode",
"instructionList": [{
"instructionText": "Select from the following list of sample:"
}],
"type": "SINGLE_FROM_SET",
"value": "DCS",
"optionList": [{
"name": "DCS",
"value": "Test"
}],
"active": true
}]
},
{
"name": "bDemo",
"label": "Demo",
"fieldList": [{
"name": "mId",
"label": "M ID:",
"type": "TEXT_BOX_SINGLE",
"active": false
},
{
"name": "firstName",
"label": "First Name:",
"type": "TEXT_BOX_SINGLE",
"value": "John",
"active": true
},
{
"name": "lastName",
"label": "Last Name",
"type": "TEXT_BOX_SINGLE",
"value": "Doe",
"active": true
},
{
"name": "genderCode",
"instructionList": [{
"instructionText": "Gender:"
}],
"type": "SINGLE_FROM_SET",
"optionList": [{
"name": "FEMALE",
"value": "FEMALE"
},
{
"name": "MALE",
"value": "MALE"
},
{
"name": "UNKNOWN",
"value": "UNKNOWN"
}],
"active": true
},
{
"name": "dateOfBirth",
"label": "Date of Birth:",
"type": "DATE",
"value": "-157748400000",
"active": true
}]
},
{
"name": "generalComments",
"label": "General Comments",
"fieldList": [{
"name": "comments",
"label": "Comments: (Optional)",
"type": "TEXT_BOX_MULTIPLE",
"value": "Comments Text Example",
"active": true
}]
}],
"Id": 1,
"periodId": 2015,
"orgId": 4,
"version": 1
}
The values that I need from this object:
var dataObject = $('#'+formName).serializeArray();
console.log("data:::"+JSON.stringify(dataObject));
dataObject:::
[{
"name": "abDate",
"value": "Sun Mar 01 2015 00:00:00 GMT-0500 (Eastern Standard Time)"
},
{
"name": "abNotes",
"value": "Example Notes 123456"
},
{
"name": "Number",
"value": "1234567890"
},
{
"name": "otherNumber",
"value": "887766"
},
{
"name": "Yes",
"value": "true"
},
{
"name": "No",
"value": "false"
},
{
"name": "DCS",
"value": "Test"
},
{
"name": "firstName",
"value": "John"
},
{
"name": "lastName",
"value": "Doe"
},
{
"name": "FEMALE",
"value": "FEMALE"
},
{
"name": "MALE",
"value": "MALE"
},
{
"name": "UNKNOWN",
"value": "UNKNOWN"
},
{
"name": "dateOfBirth",
"value": "Fri Jan 01 1965 00:00:00 GMT-0500 (Eastern Standard Time)"
},
{
"name": "comments",
"value": "Comments Text Example"
}]
EDIT:
What I have tried so far:
$.extend(formData ,dataObject);
deepCopy:
function deepCopy(src, dest) {
var name,
value,
isArray,
toString = Object.prototype.toString;
// If no `dest`, create one
if (!dest) {
isArray = toString.call(src) === "[object Array]";
if (isArray) {
dest = [];
dest.length = src.length;
}
else { // You could have lots of checks here for other types of objects
dest = {};
}
}
// Loop through the props
for (name in src) {
// If you don't want to copy inherited properties, add a `hasOwnProperty` check here
// In our case, we only do that for arrays, but it depends on your needs
if (!isArray || src.hasOwnProperty(name)) {
value = src[name];
if (typeof value === "object") {
// Recurse
value = deepCopy(value);
}
dest[name] = value;
}
}
return dest;
}

First, convert dataObject from an array of objects to an object that maps names to values. Then go through the main form data, replacing values from the corresponding elements of doHash.
var formData = {
"name": "Demo",
"fieldGroupList": [{
"name": "instructions",
"label": "Instructions",
"fieldList": [{
"name": "INSTRUCTION",
"instructionList": [{
"instructionText": "All enabled fields are required."
}],
"type": "INSTRUCTION"
}]
}, {
"name": "ab",
"label": "Ab",
"fieldList": [{
"name": "abDate",
"label": "Ab Date",
"type": "DATE",
"value": "1425186000000",
"active": true
}, {
"name": "abNotes",
"label": "Ab Notes: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "Example Notes",
"active": true
}]
}, {
"name": "Record",
"label": "Record",
"fieldList": [{
"name": "RecordNumber",
"label": "Record Number: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "1234567890",
"active": true
}, {
"name": "otherNumber",
"label": "Other: (Optional)",
"type": "TEXT_BOX_SINGLE",
"value": "887766",
"active": true
}, {
"name": "eligibleAll",
"instructionList": [{
"instructionText": "Is eligible for ALL?"
}],
"type": "SINGLE_FROM_SET",
"value": "true",
"optionList": [{
"name": "Yes",
"value": "true"
}, {
"name": "No",
"value": "false"
}],
"active": true
}, {
"name": "exclusionReasonCode",
"instructionList": [{
"instructionText": "Select from the following list of sample:"
}],
"type": "SINGLE_FROM_SET",
"value": "DCS",
"optionList": [{
"name": "DCS",
"value": "Test"
}],
"active": true
}]
}, {
"name": "bDemo",
"label": "Demo",
"fieldList": [{
"name": "mId",
"label": "M ID:",
"type": "TEXT_BOX_SINGLE",
"active": false
}, {
"name": "firstName",
"label": "First Name:",
"type": "TEXT_BOX_SINGLE",
"value": "John",
"active": true
}, {
"name": "lastName",
"label": "Last Name",
"type": "TEXT_BOX_SINGLE",
"value": "Doe",
"active": true
}, {
"name": "genderCode",
"instructionList": [{
"instructionText": "Gender:"
}],
"type": "SINGLE_FROM_SET",
"optionList": [{
"name": "FEMALE",
"value": "FEMALE"
}, {
"name": "MALE",
"value": "MALE"
}, {
"name": "UNKNOWN",
"value": "UNKNOWN"
}],
"active": true
}, {
"name": "dateOfBirth",
"label": "Date of Birth:",
"type": "DATE",
"value": "-157748400000",
"active": true
}]
}, {
"name": "generalComments",
"label": "General Comments",
"fieldList": [{
"name": "comments",
"label": "Comments: (Optional)",
"type": "TEXT_BOX_MULTIPLE",
"value": "Comments Text Example",
"active": true
}]
}],
"Id": 1,
"periodId": 2015,
"orgId": 4,
"version": 1
};
var dataObject = [{
"name": "abDate",
"value": "Sun Mar 01 2015 00:00:00 GMT-0500 (Eastern Standard Time)"
}, {
"name": "abNotes",
"value": "Example Notes 123456"
}, {
"name": "Number",
"value": "1234567890"
}, {
"name": "otherNumber",
"value": "887766"
}, {
"name": "Yes",
"value": "true"
}, {
"name": "No",
"value": "false"
}, {
"name": "DCS",
"value": "Test"
}, {
"name": "firstName",
"value": "John"
}, {
"name": "lastName",
"value": "Doe"
}, {
"name": "FEMALE",
"value": "FEMALE"
}, {
"name": "MALE",
"value": "MALE"
}, {
"name": "UNKNOWN",
"value": "UNKNOWN"
}, {
"name": "dateOfBirth",
"value": "Fri Jan 01 1965 00:00:00 GMT-0500 (Eastern Standard Time)"
}, {
"name": "comments",
"value": "Comments Text Example"
}];
var doHash = {};
$.each(dataObject, function() {
doHash[this.name] = this.value;
});
$.each(formData.fieldGroupList, function() {
$.each(this.fieldList, function() {
if (this.name in doHash) {
this.value = doHash[this.name];
}
});
});
console.log(JSON.stringify(formData));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Detect track playing or current time of mixcloud embed?

I have a mixcloud show embedded on my page.
For example:
<iframe width="660" height="180" src="//www.mixcloud.com/widget/iframe/?feed=http%3A%2F%2Fwww.mixcloud.com%2Fdjzhao%2Fjuju-juke-shangaan-footwork%2F&embed_uuid=cd8d4d1b-9940-4548-9aff-1f411f5480c0&replace=0&hide_cover=1&embed_type=widget_standard&hide_tracklist=1" frameborder="0"></iframe>
I'd like to be able to change the text displayed depending on which track is currently being played. Is there a way to detect which track is being played or the current play time and change the text accordingly?
The mixcloud api can return the information for a cloudcast that includes the track list and time at which they start like so:
{
"description": "Given I'm on the Mixcloud team, I thought I really should have something up here. Here's an hour's worth of funky music to get you ready for partying, enjoy the music and ignore the quality (or lack thereof) of the DJ!",
"tags": [
{
"url": "http://www.mixcloud.com/tag/funky-house/",
"name": "Funky house",
"key": "/tag/funky-house/"
},
{
"url": "http://www.mixcloud.com/tag/funk/",
"name": "Funk",
"key": "/tag/funk/"
},
{
"url": "http://www.mixcloud.com/tag/soul/",
"name": "Soul",
"key": "/tag/soul/"
}
],
"play_count": 1864,
"user": {
"url": "http://www.mixcloud.com/spartacus/",
"username": "spartacus",
"name": "Spartacus",
"key": "/spartacus/",
"pictures": {
"medium": "http://images-mix.netdna-ssl.com/w/100/h/100/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"320wx320h": "http://images-mix.netdna-ssl.com/w/320/h/320/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"extra_large": "http://images-mix.netdna-ssl.com/w/600/h/600/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"large": "http://images-mix.netdna-ssl.com/w/300/h/300/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"640wx640h": "http://images-mix.netdna-ssl.com/w/640/h/640/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"medium_mobile": "http://images-mix.netdna-ssl.com/w/80/h/80/q/75/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"small": "http://images-mix.netdna-ssl.com/w/25/h/25/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"thumbnail": "http://images-mix.netdna-ssl.com/w/50/h/50/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg"
}
},
"key": "/spartacus/party-time/",
"created_time": "2009-08-02T16:55:01Z",
"audio_length": 3361,
"slug": "party-time",
"favorite_count": 11,
"listener_count": 90,
"name": "Party Time",
"url": "http://www.mixcloud.com/spartacus/party-time/",
"pictures": {
"medium": "http://images-mix.netdna-ssl.com/w/100/h/100/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"320wx320h": "http://images-mix.netdna-ssl.com/w/320/h/320/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"extra_large": "http://images-mix.netdna-ssl.com/w/600/h/600/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"large": "http://images-mix.netdna-ssl.com/w/300/h/300/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"640wx640h": "http://images-mix.netdna-ssl.com/w/640/h/640/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"medium_mobile": "http://images-mix.netdna-ssl.com/w/80/h/80/q/75/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"small": "http://images-mix.netdna-ssl.com/w/25/h/25/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"thumbnail": "http://images-mix.netdna-ssl.com/w/50/h/50/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png"
},
"updated_time": "2013-10-15T13:48:53Z",
"comment_count": 3,
"sections": [
{
"track": {
"url": "http://www.mixcloud.com/track/jazztronik/samurai-12-mix/",
"artist": {
"url": "http://www.mixcloud.com/artist/jazztronik/",
"name": "Jazztronik",
"key": "/artist/jazztronik/",
"slug": "jazztronik"
},
"name": "Samurai (12\" Mix)",
"key": "/track/jazztronik/samurai-12-mix/",
"slug": "samurai-12-mix"
},
"position": 1,
"start_time": 0,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/time-of-your-life/refresher/",
"artist": {
"url": "http://www.mixcloud.com/artist/time-of-your-life/",
"name": "Time of your life",
"key": "/artist/time-of-your-life/",
"slug": "time-of-your-life"
},
"name": "Refresher",
"key": "/track/time-of-your-life/refresher/",
"slug": "refresher"
},
"position": 2,
"start_time": 416,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/dutch/my-time-feat-crystal-waters/",
"artist": {
"url": "http://www.mixcloud.com/artist/dutch/",
"name": "Dutch",
"key": "/artist/dutch/",
"slug": "dutch"
},
"name": "My time (feat. Crystal Waters)",
"key": "/track/dutch/my-time-feat-crystal-waters/",
"slug": "my-time-feat-crystal-waters"
},
"position": 3,
"start_time": 716,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/minimal-funk/definition-of-house/",
"artist": {
"url": "http://www.mixcloud.com/artist/minimal-funk/",
"name": "Minimal Funk",
"key": "/artist/minimal-funk/",
"slug": "minimal-funk"
},
"name": "Definition of House",
"key": "/track/minimal-funk/definition-of-house/",
"slug": "definition-of-house"
},
"position": 4,
"start_time": 1061,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/mint-royale/i-dont-know/",
"artist": {
"url": "http://www.mixcloud.com/artist/mint-royale/",
"name": "Mint Royale",
"key": "/artist/mint-royale/",
"slug": "mint-royale"
},
"name": "I dont know",
"key": "/track/mint-royale/i-dont-know/",
"slug": "i-dont-know"
},
"position": 5,
"start_time": 1500,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/michael-jackson/thrill-her/",
"artist": {
"url": "http://www.mixcloud.com/artist/michael-jackson/",
"name": "Michael Jackson",
"key": "/artist/michael-jackson/",
"slug": "michael-jackson"
},
"name": "Thrill Her",
"key": "/track/michael-jackson/thrill-her/",
"slug": "thrill-her"
},
"position": 6,
"start_time": 1763,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/elio-isola/happy-featcharlise/",
"artist": {
"url": "http://www.mixcloud.com/artist/elio-isola/",
"name": "Elio Isola",
"key": "/artist/elio-isola/",
"slug": "elio-isola"
},
"name": "Happy (feat.Charlise)",
"key": "/track/elio-isola/happy-featcharlise/",
"slug": "happy-featcharlise"
},
"position": 7,
"start_time": 2123,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/dancin/",
"artist": {
"url": "http://www.mixcloud.com/artist/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/",
"name": "Erick Morillo, Harry Romero & Jose Nunez feat. Jessica Eve",
"key": "/artist/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/",
"slug": "erick-morillo-harry-romero-jose-nunez-feat-jessica-eve"
},
"name": "Dancin",
"key": "/track/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/dancin/",
"slug": "dancin"
},
"position": 8,
"start_time": 2442,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/kosheen/all-in-my-head/",
"artist": {
"url": "http://www.mixcloud.com/artist/kosheen/",
"name": "Kosheen",
"key": "/artist/kosheen/",
"slug": "kosheen"
},
"name": "All in my head",
"key": "/track/kosheen/all-in-my-head/",
"slug": "all-in-my-head"
},
"position": 9,
"start_time": 2738,
"section_type": "track"
}
]
}
Thanks for any help

MixCloud released in 2014 a JavaScript API/SDK which communicates with the iframe:
https://www.mixcloud.com/developers/widget/
It uses window.postMessage for all communication with the iframe.
For example:
<iframe id="mixcloud-iframe" width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?feed=https://www.mixcloud.com/thisgreedypig/the-pigs-ear-money-ex-records-show-case/&hide_cover=1&mini=1&light=1" frameborder="0"></iframe>
<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>
<script type="text/javascript">
var widget = Mixcloud.PlayerWidget(document.getElementById('mixcloud-iframe'));
function togglePlayPause () {
// handle the ui
}
widget.ready.then(function() {
widget.events.pause.on(togglePlayPause);
widget.events.play.on(togglePlayPause);
});
</script>

Extracting data from JSON using javascript

I have JSON similar to this . I wish to extract values like name, his id, and product title from this list . But I am not able to figure it out . I was trying "eval" for the same.
{
"data": [{
"id": "3092773937557",
"from": {
"id": "1810306393",
"name": "Prashant Singh"
},
"start_time": "2012-07-21T09:12:53+0000",
"end_time": "2012-07-21T09:12:53+0000",
"publish_time": "2012-07-21T09:12:53+0000",
"application": {
"id": "132692593533721",
"name": "Compare Hatke"
},
"data": {
"productname": "Apple iPod Nano",
"price": 399,
"product": {
"id": "10151004296768984",
"url": "http:\/\/compare.buyhatke.com\/products\/Apple-iPod-Nano",
"type": "comparehatke:product",
"title": "Apple iPod Nano"
}
},
"likes": {
"count": 0
},
"comments": {
"count": 0
},
"no_feed_story": false
}, {
"id": "3092770217464",
"from": {
"id": "1810306393",
"name": "Prashant Singh"
},
"start_time": "2012-07-21T09:08:53+0000",
"end_time": "2012-07-21T09:08:53+0000",
"publish_time": "2012-07-21T09:08:53+0000",
"application": {
"id": "132692593533721",
"name": "Compare Hatke"
},
"data": {
"productname": "Apple iPod Nano",
"price": 399,
"product": {
"id": "10151004296768984",
"url": "http:\/\/compare.buyhatke.com\/products\/Apple-iPod-Nano",
"type": "comparehatke:product",
"title": "Apple iPod Nano"
}
},
"likes": {
"count": 0
},
"comments": {
"count": 0
},
"no_feed_story": false
}],
"paging": {
"next": "https:\/\/graph.facebook.com\/me\/comparehatke:compare\/?access_token=AAAB4rubm4xkBAHRhdjVgx7JxIIvUxImIm31AMxgnqEAOQsAsgZAJjBYUfvzKc8XgxDBg3AzKN1S6QU2dnmtgj7TPcoCiih1RzrL3pLpuZAgGt8eKpq&limit=2&method=get&pretty=0&offset=2"
}
}

<html>
<script style="text/javscript">
var myObject = { "data": [{
"id": "3092741696751",
"from": {
"id": "1810306393",
"name": "Prashant Singh"
},
"start_time": "2012-07-21T08:40:38+0000",
"end_time": "2012-07-21T08:40:38+0000",
"publish_time": "2012-07-21T08:40:38+0000",
"application": {
"id": "132692593533721",
"name": "Compare Hatke"
},
"data1": {
"productname": "Apple iPod Nano",
"price": 399,
"product": {
"id": "10151004296768984",
"url": "http:\/\/compare.buyhatke.com\/products\/Apple-iPod-Nano",
"type": "comparehatke:product",
"title": "Apple iPod Nano"
}
},
"likes": {
"count": 0
},
"comments": {
"count": 0
},
"no_feed_story": false
} ]};
alert(myObject.data[0].id);
</script>
</html>

data = JSON.parse(yourJSONString);
If this fails, you likely have an error in your JSON. You can use http://jsonlint.com/ to find and resolve the problem. In the paste above, you're missing your closing ]}.