Related
I am sending an array of objects from the backend to the Vue frontend that looks like this in the postman:
[
{
"ID": 112,
"menu_order": 1,
"title": "Nyheter",
"slug": "hjem",
"url": "/nyheter",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 159,
"menu_order": 2,
"title": "HivNorge mener",
"slug": "hivnorge-mener",
"url": "/post/bli-frivillig",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 160,
"menu_order": 3,
"submenu": [
{
"ID": 3307,
"menu_order": 4,
"title": "Hva er hiv?",
"slug": "hva-er-hiv",
"url": "/post/hva-er-hiv",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3292,
"menu_order": 5,
"title": "Hva er aids?",
"slug": "hva-er-aids",
"url": "/post/hva-er-aids",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3280,
"menu_order": 6,
"title": "Hivtesten",
"slug": "hivtesten",
"url": "/post/hivtesten",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 6308,
"menu_order": 7,
"title": "PEP og PrEP",
"slug": "pep-og-prep",
"url": "/post/pep-og-prep",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3252,
"menu_order": 8,
"title": "Smitteveier",
"slug": "smitteveier",
"url": "/post/smitteveier",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 6610,
"menu_order": 9,
"title": "Nye retningslinjer for hivbehandling",
"slug": "nye-retningslinjer-for-hivbehandling",
"url": "/post/nye-retningslinjer-for-hivbehandling",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 7172,
"menu_order": 10,
"title": "Quiz",
"slug": "quiz",
"url": "/type/quiz",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 145,
"menu_order": 11,
"submenu": [
{
"ID": 5141,
"menu_order": 12,
"title": "Straffeloven",
"slug": "straffeloven-2",
"url": "/post/straffeloven-1",
"status": "publish",
"main_category": "Hovedmeny"
}
],
"title": "Hiv og juss",
"slug": "hiv-og-juss",
"url": "/folder/hiv-og-juss",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3040,
"menu_order": 13,
"submenu": [
{
"ID": 3474,
"menu_order": 14,
"title": "Kriminalisering",
"slug": "kriminalisering",
"url": "/post/kriminalisering-2",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 4017,
"menu_order": 15,
"title": "FN og aids",
"slug": "fn-og-aids",
"url": "/post/fn-og-aids",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3971,
"menu_order": 16,
"title": "Kort historie",
"slug": "kort-historie",
"url": "/post/kort-historie",
"status": "publish",
"main_category": "Hovedmeny"
}
],
"title": "Hiv i verden",
"slug": "hiv-i-verden",
"url": "/folder/hiv-i-verden",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3088,
"menu_order": 17,
"title": "Statistikk",
"slug": "statistikk",
"url": "/post/statistikk-2",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3102,
"menu_order": 18,
"title": "Andres materiell",
"slug": "andres-materiell",
"url": "/post/andres-materiell",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 5667,
"menu_order": 19,
"title": "Andres aktiviteter",
"slug": "andres-aktiviteter",
"url": "/post/andres-aktiviteter",
"status": "publish",
"main_category": "Hovedmeny"
}
],
"title": "Om hiv",
"slug": "om-hivaids",
"url": "/folder/om-hiv",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3050,
"menu_order": 20,
"submenu": [
{
"ID": 3310,
"menu_order": 21,
"title": "Sekretariatet",
"slug": "sekretariatet",
"url": "/post/sekretariatet",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3296,
"menu_order": 22,
"title": "Styret",
"slug": "styret",
"url": "/post/styret",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 4449,
"menu_order": 23,
"title": "Strategiplan",
"slug": "strategiplan",
"url": "/post/strategiplan",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3276,
"menu_order": 24,
"title": "Vedtekter",
"slug": "vedtekter",
"url": "/post/vedtekter",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3235,
"menu_order": 25,
"title": "Årsmeldinger",
"slug": "arsmeldinger",
"url": "/post/aarsmeldinger",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3211,
"menu_order": 26,
"title": "Medlemmer",
"slug": "medlemmer",
"url": "/post/medlemmer",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3156,
"menu_order": 27,
"title": "Her er vi",
"slug": "her-er-vi",
"url": "/post/her-er-vi",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 5355,
"menu_order": 28,
"title": "Historie",
"slug": "historie-2",
"url": "/post/historie-1",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 3254,
"menu_order": 29,
"title": "Retningslinjer",
"slug": "retningslinjer",
"url": "/post/retningslinjer",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 5486,
"menu_order": 30,
"title": "Gave",
"slug": "gave",
"url": "/post/gave",
"status": "publish",
"main_category": "Hovedmeny"
},
{
"ID": 5781,
"menu_order": 31,
"title": "Bli frivillig",
"slug": "bli-frivillig",
"url": "/post/bli-frivillig",
"status": "publish",
"main_category": "Hovedmeny"
}
],
"title": "Om oss",
"slug": "om-oss",
"url": "/folder/om-oss",
"status": "publish",
"main_category": "Hovedmeny"
}
]
I am using Axios for ajax requests, what I don't get is why is this array interpreted as an object when I get it in the frontend. When I am making a call to the backend:
BACKEND.get('/menu')
.then(res => {
console.log(res.data);
commit('setMenus', res.data);
})
In the console res.data I get an object that consist of objects that are elements of the array above, what I get looks like this, (it is a very stripped down example):
{1: {…}, 2: {…}, 3: {…}, 13: {…}}
1:Object
ID:7406
main_category:"Hovedmeny"
menu_order:1
slug:"nyheter"
title:"Nyheter"
url:"/nyheter"
...so on
Why is this happening?
I'm working on a project where I need to get all the vacant classrooms for the day and basically filter out the ones being in use.
I get all the data from the school's own API with JSON response body that looks like this:
{
"status": "success",
"reservations": [
{
"id": "18935",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:51",
"startDate": "2017-04-27T11:00:00",
"endDate": "2017-04-27T13:00:00",
"resources": [
{
"id": "50",
"type": "room",
"code": "A440.5",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A440.5"
},
{
"id": "2995",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2267",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20362",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:05",
"startDate": "2017-04-27T11:00:00",
"endDate": "2017-04-27T14:00:00",
"resources": [
{
"id": "51",
"type": "room",
"code": "A450.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A450.1"
},
{
"id": "2402",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "3064",
"type": "realization",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20237",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:05",
"startDate": "2017-04-27T11:15:00",
"endDate": "2017-04-27T13:00:00",
"resources": [
{
"id": "45",
"type": "room",
"code": "A420.4",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A420.4"
},
{
"id": "2433",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "3058",
"type": "realization",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20888",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:57",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "62",
"type": "room",
"code": "A520.5",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A520.5"
},
{
"id": "3092",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2444",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "22586",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:48",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "52",
"type": "room",
"code": "A450.3",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A450.3"
},
{
"id": "3004",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2294",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "525",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "18816",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:58",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "41",
"type": "room",
"code": "A340.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A340.1"
},
{
"id": "2989",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "795",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "599",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20431",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:56",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "40",
"type": "room",
"code": "A320.7",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A320.7/8"
},
{
"id": "2416",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2386",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "18588",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:49",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "25",
"type": "room",
"code": "A130.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A130.1"
},
{
"id": "26",
"type": "room",
"code": "A130.3",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A130.3"
},
{
"id": "2979",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "582",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "18940",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:53",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "2996",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2267",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "2268",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "31",
"type": "room",
"code": "A210.2",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A210.2"
}
],
"description": ""
},
{
"id": "12041",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:53",
"startDate": "2017-04-27T14:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "2510",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "775",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "23",
"type": "room",
"code": "A520.7",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A520.7"
}
],
"description": ""
},
{
"id": "24630",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:05",
"startDate": "2017-04-27T14:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "3277",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "42",
"type": "room",
"code": "A340.2",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A340.2"
}
],
"description": ""
},
{
"id": "27205",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:07",
"startDate": "2017-04-27T14:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "35",
"type": "room",
"code": "A240.2",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A240.2"
},
{
"id": "775",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "3384",
"type": "realization",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "25917",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:00",
"startDate": "2017-04-27T15:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "36",
"type": "room",
"code": "A240.4",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A240.4"
},
{
"id": "593",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "595",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "21932",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:06",
"startDate": "2017-04-27T16:00:00",
"endDate": "2017-04-27T18:00:00",
"resources": [
{
"id": "43",
"type": "room",
"code": "A350.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A350.1"
},
{
"id": "2464",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "2747",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
}
]
}
In order to get the JSON response I need to put startDate (the moment user searches the vacant rooms, in this situation it is: 2017-04-27T10:55) and endDate (set to end of the day, 2017-04-27T22:00). The result for this query is the JSON response above.
The problem is that the API I'm using doesn't contain any data for the vacant rooms but only for the ones booked for certain times so I made a list of all the rooms in the building and compared it to the booked ones to filter them out:
var rooms = ['A120.3', 'A130.1', 'A130.3', 'A140.1', 'A140.2', 'A140.4', 'A250.1', 'A240.4', 'A240.2', 'A220.5', 'A220.3',
'A220.1', 'A210.2', 'A320.2', 'A320.6', 'A320.7', 'A320.8', 'A340.1', 'A340.2', 'A350.1', 'A350.3', 'A440.5', 'A450.3','A450.1',
'A440.4', 'A440.2', 'A420.6', 'A420.5', 'A420.4', 'A420.2', 'A510.2', 'A520.5', 'A510.4', 'A520.6', 'A520.7','A540.1', 'A540.2'];
var data = JSON.parse(responseText);
var booking = Object.create(null);
var free;
data.reservations.forEach(function (reservation) {
reservation.resources.some(function (resource) {
if (resource.type === 'room') {
booking[resource.code] = booking[resource.code] || [];
booking[resource.code].push({ startDate: reservation.startDate, endDate: reservation.endDate });
return true;
}
});
});
free = rooms.filter(function (a) {
return !booking[a];
});
console.log(free);
Results:
A210.3
A220.5
A320.2
A520.6
A510.4
This only returns the ones that are not being used at all during the day but I need to get the ones that are vacant for hour or two.
For this booked class for example:
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"type": "room",
"code": "A520.5"
for this I would need to print out:
A520.5 - 2 hours 20 minutes
So I need to get the room / time from the startDate of the search (2017-04-27T10:55) and compare it to the startDate of the booked room (2017-04-27T13:15:00) to get the time remaining for that room to be vacant.
TO CLARIFY:
I have all the data for booked rooms starting from 2017-04-27T10:55
until 2017-04-27T22:00 as you can see from the JSON response above.
I need to somehow compare the startDate of the JSON query when the user
searches for the rooms (2017-04-27T10:55) and compare it to the booked
rooms startDate to get the time how long the room stays vacant.
This is how I'm doing my startDate and endDate for the JSON query:
// Timestamp needs to be formed (YYYY-MM-DDTxx:xx) in order for JSON query to work
var todaysDate = new Date();
function convertDate(date) {
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth() + 1).toString();
var dd = date.getDate().toString();
var mmChars = mm.split('');
var ddChars = dd.split('');
return yyyy + '-' + (mmChars[1] ? mm : "0" + mmChars[0]) + '-' + (ddChars[1] ? dd : "0" + ddChars[0]);
}
// Current time when user searches for vacant rooms
var currentTime = new Date();
var time = "T" + currentTime.getHours() + ":" + currentTime.getMinutes();
// variables for the JSON query
var startDate = convertDate(todaysDate) + time;
var endDate = convertDate(todaysDate) + ("T22:00");
// JSON-query
var getRooms = {
"startDate": startDate,
"endDate": endDate
};
I am trying to find the tree level for one particular key in recursive object in
JavaScript. I need value of each title key in the below object and also find level of that current object like as tree, but the object recurses to infinity.
How can I get the tree level for a specified key?
Expected Output
Here is my object
var object = {
"code": 200,
"data": {
"id": "614b4da4-2910-42c5-8afe-c12521cb0b52",
"title": "Android Quick Start Guide",
"subTitles": [
{
"id": "4dc22d3a-6e10-4938-b538-f86e56afe053",
"title": "Welcome to Android",
"subTitles": [
{
"id": "4dc22d3a-6e10-4938-b538-f86e56afe053",
"title": "Welcome to Android",
"subTitles": []
},
{
"id": "4dc22d3a-6e10-4938-b538-f86e56afe053",
"title": "Welcome to Android",
"subTitles": []
}
]
}
]
},
"message": "created"
};
A recursion would help with Array#reduce() and a proper start value, like a new tag element ul
function getValues(ul, a) {
var li = document.createElement('li');
li.innerHTML = a.description;
Array.isArray(a.subTitles) && li.appendChild(a.subTitles.reduce(getValues, document.createElement('ul')));
ul.appendChild(li);
return ul;
}
var object = { "code": 200, "data": { "path": "614b4da4-2910-42c5-8afe-c12521cb0b52", "number": 100, "description": "Android Quick Start Guide", "createdTime": 1460095475590, "id": "614b4da4-2910-42c5-8afe-c12521cb0b52", "title": "Android Quick Start Guide", "isRootTitle": true, "subTitles": [{ "path": "614b4da4-2910-42c5-8afe-c12521cb0b52", "number": 100, "description": "description about the manual 1", "createdTime": 1460095516423, "id": "4dc22d3a-6e10-4938-b538-f86e56afe053", "title": "Welcome to Android", "isRootTitle": false, "subTitles": [{ "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 100, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "About Android Marshmallow", "isRootTitle": false, "subTitles": [] }, { "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 200, "description": "description about the manual 1.2", "createdTime": 1460095672614, "id": "63743f5f-6451-4792-96c6-936b7e8fe820", "title": "What's new in 6.0", "isRootTitle": false, "subTitles": [{ "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 100, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Get Started", "isRootTitle": false, "subTitles": [] }] }] }, { "path": "614b4da4-2910-42c5-8afe-c12521cb0b52", "number": 200, "description": "description about the manual 2", "createdTime": 1460095526821, "id": "42c669ca-d1cb-494c-8c7d-cbef767de919", "title": "Essentials", "isRootTitle": false, "subTitles": [{ "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 100, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Google Now", "isRootTitle": false, "subTitles": [] }, { "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 200, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Tell Google what to do", "isRootTitle": false, "subTitles": [] }] }, { "path": "614b4da4-2910-42c5-8afe-c12521cb0b52", "number": 300, "description": "description about the manual 3", "createdTime": 1460095536268, "id": "1018401c-211a-4cdc-9370-d59d75325da5", "title": "Gesture Typing", "isRootTitle": false, "subTitles": [{ "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 100, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Enter & edit text", "isRootTitle": false, "subTitles": [] }, { "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 200, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Type by speaking", "isRootTitle": false, "subTitles": [] }] }, { "path": "614b4da4-2910-42c5-8afe-c12521cb0b52", "number": 400, "description": "description about the manual 4", "createdTime": 1460095549864, "id": "e58de49c-c261-46cc-aef4-4d75c3fdcc21", "title": "Try some apps", "isRootTitle": false, "subTitles": [{ "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 100, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Enter & edit text", "isRootTitle": false, "subTitles": [] }, { "path": "4dc22d3a-6e10-4938-b538-f86e56afe053", "number": 200, "description": "About Android Marshmallow", "createdTime": 1460095604835, "id": "c431983e-e4e2-4369-8322-4358c2e6db6e", "title": "Type by speaking", "isRootTitle": false, "subTitles": [] }] }] }, "message": "created" };
document.body.appendChild([object.data].reduce(getValues, document.createElement('ul')));
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>
I have this collection: https://graph.facebook.com/2playcz/albums
This collection contains 8 id. How can i get the total count id of this collection using javascript? (Total = 8)
Source:
{
"data": [
{
"id": "201936779932071",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tr\u00e9ninky",
"link": "https://www.facebook.com/album.php?fbid=201936779932071&id=190320081093741&aid=41883",
"cover_photo": "201937046598711",
"count": 8,
"type": "normal",
"created_time": "2012-07-02T09:33:43+0000",
"updated_time": "2012-09-15T12:05:44+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "1788805921",
"name": "Edita Nov\u00e1"
},
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/201936779932071/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "205206429605106",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Turnaje a akce",
"link": "https://www.facebook.com/album.php?fbid=205206429605106&id=190320081093741&aid=42900",
"cover_photo": "205208716271544",
"count": 14,
"type": "normal",
"created_time": "2012-07-10T19:36:53+0000",
"updated_time": "2012-09-15T12:04:05+0000",
"can_upload": false
},
{
"id": "221784994613916",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tenisova \u0161kolka 2play",
"description": "Tenisov\u00e1 \u0161kolka 2play",
"link": "https://www.facebook.com/album.php?fbid=221784994613916&id=190320081093741&aid=49379",
"cover_photo": "221785024613913",
"count": 9,
"type": "normal",
"created_time": "2012-08-31T11:19:59+0000",
"updated_time": "2012-09-14T15:17:53+0000",
"can_upload": false
},
{
"id": "203405996451816",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Webov\u00e9 fotografie - Logo",
"link": "https://www.facebook.com/album.php?fbid=203405996451816&id=190320081093741&aid=42285",
"cover_photo": "203406586451757",
"count": 11,
"type": "normal",
"created_time": "2012-07-05T10:12:40+0000",
"updated_time": "2012-09-14T15:16:40+0000",
"can_upload": false
},
{
"id": "190332361092513",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Cover Photos",
"link": "https://www.facebook.com/album.php?fbid=190332361092513&id=190320081093741&aid=39232",
"cover_photo": "225939404198475",
"count": 2,
"type": "normal",
"created_time": "2012-06-09T13:52:38+0000",
"updated_time": "2012-09-12T18:15:51+0000",
"can_upload": false
},
{
"id": "190802884378794",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Wall Photos",
"link": "https://www.facebook.com/album.php?fbid=190802884378794&id=190320081093741&aid=39324",
"cover_photo": "190802891045460",
"count": 2,
"type": "wall",
"created_time": "2012-06-10T13:19:48+0000",
"updated_time": "2012-07-17T17:16:19+0000",
"can_upload": false
},
{
"id": "205207126271703",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Ostatn\u00ed",
"link": "https://www.facebook.com/album.php?fbid=205207126271703&id=190320081093741&aid=42902",
"cover_photo": "205209679604781",
"count": 4,
"type": "normal",
"created_time": "2012-07-10T19:40:05+0000",
"updated_time": "2012-07-16T14:47:16+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/205207126271703/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "190320914426991",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Profile Pictures",
"link": "https://www.facebook.com/album.php?fbid=190320914426991&id=190320081093741&aid=39224",
"cover_photo": "190327474426335",
"count": 1,
"type": "profile",
"created_time": "2012-06-09T13:29:16+0000",
"updated_time": "2012-06-09T13:43:08+0000",
"can_upload": false
},
{
"id": "190322704426812",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Logo",
"description": "Loga spole\u010dnosti",
"link": "https://www.facebook.com/album.php?fbid=190322704426812&id=190320081093741&aid=39225",
"type": "normal",
"created_time": "2012-06-09T13:34:09+0000",
"updated_time": "2012-07-05T10:16:58+0000",
"can_upload": false
}
]
}
If you mean the count of items in the data array, it would just be data.length.
First of all, there 9 ids. If you want to count the number of elements in array there's a built-in property length. So that if your object is called x you retrieve the length of data by accessing x.data.length.
On the other hand, if you wanted to count the number of unique ids (IDs should by unique anyway, but if you really really wanted to) you have to manually iterate through the array and count them:
var countIds = function (arr) {
var uniqueIds = {}, num = 0;
if (!arr.data) return false;
arr.data.forEach(function (val, i) {
if (typeof uniqueIds[val.id] === "undefined") {
++num;
uniqueIds[val.id] = true;
}
});
return num;
};