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?
Related
I'm new working with apis, I already made a post but I make a new one to clarify my problem.
I'm trying to get posts from dummyapi, here is my code :
import React from 'react'
import axios from 'axios'
import { useQuery } from 'react-query';
export default function Home() {
function fetcher() {
return axios.get('https://dummyapi.io/data/v1/post', {
headers : {
"app-id" : "#####"(i have one dont worry)
}
});
}
const {isLoading, data} = useQuery('getPosts',() => fetcher())
// console.log(data)
if(isLoading){
return (<p>IsLoading...</p>)
}
return (
<div >
{Object.keys(data.data).map((e) => <p key={e}>{e.id}</p>)}
</div>
)
}
With this code, i can get the datas, but it don't want to display the ids that are in the return, and when i change something it tells me that data is undefined, to help you to help me here is the api response :
{
"data": [
{
"id": "60d21b4667d0d8992e610c85",
"image": "https://img.dummyapi.io/photo-1564694202779-bc908c327862.jpg",
"likes": 43,
"tags": [
"animal",
"dog",
"golden retriever"
],
"text": "adult Labrador retriever",
"publishDate": "2020-05-24T14:53:17.598Z",
"owner": {
"id": "60d0fe4f5311236168a109ca",
"title": "ms",
"firstName": "Sara",
"lastName": "Andersen",
"picture": "https://randomuser.me/api/portraits/women/58.jpg"
}
},
{
"id": "60d21b4967d0d8992e610c90",
"image": "https://img.dummyapi.io/photo-1510414696678-2415ad8474aa.jpg",
"likes": 31,
"tags": [
"snow",
"ice",
"mountain"
],
"text": "ice caves in the wild landscape photo of ice near ...",
"publishDate": "2020-05-24T07:44:17.738Z",
"owner": {
"id": "60d0fe4f5311236168a10a0b",
"title": "miss",
"firstName": "Margarita",
"lastName": "Vicente",
"picture": "https://randomuser.me/api/portraits/med/women/5.jpg"
}
},
{
"id": "60d21b8667d0d8992e610d3f",
"image": "https://img.dummyapi.io/photo-1515376721779-7db6951da88d.jpg",
"likes": 16,
"tags": [
"dog",
"pet",
"canine"
],
"text": "#adventure.yuki frozen grass short-coated black do...",
"publishDate": "2020-05-24T05:44:55.297Z",
"owner": {
"id": "60d0fe4f5311236168a109ed",
"title": "miss",
"firstName": "Kayla",
"lastName": "Bredesen",
"picture": "https://randomuser.me/api/portraits/med/women/13.jpg"
}
},
{
"id": "60d21b3a67d0d8992e610c60",
"image": "https://img.dummyapi.io/photo-1581804928342-4e3405e39c91.jpg",
"likes": 7,
"tags": [
"canine",
"pet",
"mammal"
],
"text": "Hiking with my dog in the woods. black labrador re...",
"publishDate": "2020-05-23T22:56:11.424Z",
"owner": {
"id": "60d0fe4f5311236168a109d5",
"title": "mrs",
"firstName": "Sibylle",
"lastName": "Leibold",
"picture": "https://randomuser.me/api/portraits/med/women/89.jpg"
}
},
{
"id": "60d21bf967d0d8992e610e9b",
"image": "https://img.dummyapi.io/photo-1574457547512-5b1646994eea.jpg",
"likes": 28,
"tags": [
"dog",
"human",
"animal"
],
"text": "Two boys hug their dogs in a leaf pile in the fall...",
"publishDate": "2020-05-23T18:52:32.613Z",
"owner": {
"id": "60d0fe4f5311236168a109f7",
"title": "mrs",
"firstName": "Jolanda",
"lastName": "Lacroix",
"picture": "https://randomuser.me/api/portraits/med/women/32.jpg"
}
},
{
"id": "60d21b7d67d0d8992e610d25",
"image": "https://img.dummyapi.io/photo-1498534928137-473daa67f5c4.jpg",
"likes": 18,
"tags": [
"dog",
"animal",
"pet"
],
"text": "Bone salt and pepper schnauzer puppy",
"publishDate": "2020-05-23T14:42:22.808Z",
"owner": {
"id": "60d0fe4f5311236168a109e4",
"title": "mr",
"firstName": "Pwry",
"lastName": "Shylyrd",
"picture": "https://randomuser.me/api/portraits/med/men/37.jpg"
}
},
{
"id": "60d21bd767d0d8992e610e31",
"image": "https://img.dummyapi.io/photo-1576707064479-3139e7e8aace.jpg",
"likes": 19,
"tags": [
"animal",
"canine",
"dog"
],
"text": "Sleeping dogs lie two dogs lying on black textile",
"publishDate": "2020-05-23T12:55:22.576Z",
"owner": {
"id": "60d0fe4f5311236168a10a0f",
"title": "mr",
"firstName": "Kaya",
"lastName": "Basoglu",
"picture": "https://randomuser.me/api/portraits/med/men/59.jpg"
}
},
{
"id": "60d21baa67d0d8992e610da7",
"image": "https://img.dummyapi.io/photo-1500879747858-bb1845b61beb.jpg",
"likes": 242,
"tags": [
"dog",
"animal",
"golden retriever"
],
"text": "Dog in a forest at sunset dog in forest with sun r...",
"publishDate": "2020-05-22T22:27:12.912Z",
"owner": {
"id": "60d0fe4f5311236168a10a29",
"title": "ms",
"firstName": "Vanessa",
"lastName": "Ramos",
"picture": "https://randomuser.me/api/portraits/med/women/33.jpg"
}
},
{
"id": "60d21af967d0d8992e610ba1",
"image": "https://img.dummyapi.io/photo-1568572933382-74d440642117.jpg",
"likes": 79,
"tags": [
"dog",
"animal",
"husky"
],
"text": "black and white Husky",
"publishDate": "2020-05-22T20:05:03.653Z",
"owner": {
"id": "60d0fe4f5311236168a109e4",
"title": "mr",
"firstName": "Pwry",
"lastName": "Shylyrd",
"picture": "https://randomuser.me/api/portraits/med/men/37.jpg"
}
},
{
"id": "60d21aeb67d0d8992e610b79",
"image": "https://img.dummyapi.io/photo-1579562243430-4732bcb09d91.jpg",
"likes": 17,
"tags": [
"dog",
"pet",
"animal"
],
"text": "Milo durmiendo después de un largo día de jugar en...",
"publishDate": "2020-05-22T07:50:38.093Z",
"owner": {
"id": "60d0fe4f5311236168a109ce",
"title": "mr",
"firstName": "Rudi",
"lastName": "Droste",
"picture": "https://randomuser.me/api/portraits/med/men/83.jpg"
}
},
{
"id": "60d21bad67d0d8992e610daf",
"image": "https://img.dummyapi.io/photo-1568480541687-16c2f73eea4c.jpg",
"likes": 12,
"tags": [
"dog",
"beach",
"shoreline"
],
"text": "Gratitude short-coated tan dog on seashore",
"publishDate": "2020-05-22T06:33:02.593Z",
"owner": {
"id": "60d0fe4f5311236168a109dd",
"title": "mr",
"firstName": "Miguel",
"lastName": "Lima",
"picture": "https://randomuser.me/api/portraits/med/men/31.jpg"
}
},
{
"id": "60d21bee67d0d8992e610e79",
"image": "https://img.dummyapi.io/photo-1517884467367-ac2e21e46d0b.jpg",
"likes": 43,
"tags": [
"pet",
"canine",
"grey"
],
"text": "#adventure.yuki peekaboo adult short-coated black ...",
"publishDate": "2020-05-22T03:10:54.820Z",
"owner": {
"id": "60d0fe4f5311236168a109e6",
"title": "miss",
"firstName": "Milla",
"lastName": "Pollari",
"picture": "https://randomuser.me/api/portraits/med/women/89.jpg"
}
},
{
"id": "60d21bd267d0d8992e610e21",
"image": "https://img.dummyapi.io/photo-1548658146-f142deadf8f7.jpg",
"likes": 92,
"tags": [
"dog",
"grey",
"puppy"
],
"text": "front view of black and white puppy sitting on bro...",
"publishDate": "2020-05-21T22:15:26.266Z",
"owner": {
"id": "60d0fe4f5311236168a10a12",
"title": "mr",
"firstName": "Kenneth",
"lastName": "Carter",
"picture": "https://randomuser.me/api/portraits/med/men/40.jpg"
}
},
{
"id": "60d21b1a67d0d8992e610c05",
"image": "https://img.dummyapi.io/photo-1535008652995-e95986556e32.jpg",
"likes": 15,
"tags": [
"human",
"ocean",
"nature"
],
"text": "Random man walking with his dogs man and dogs on t...",
"publishDate": "2020-05-21T15:53:26.275Z",
"owner": {
"id": "60d0fe4f5311236168a109e7",
"title": "mr",
"firstName": "Joey",
"lastName": "Oliver",
"picture": "https://randomuser.me/api/portraits/med/men/61.jpg"
}
},
{
"id": "60d21be267d0d8992e610e52",
"image": "https://img.dummyapi.io/photo-1580734075803-ac9cdb54fb03.jpg",
"likes": 3,
"tags": [
"dog",
"canine",
"animal"
],
"text": "Majestic looking dog on a lake white and brown sho...",
"publishDate": "2020-05-21T15:15:02.703Z",
"owner": {
"id": "60d0fe4f5311236168a109e3",
"title": "mr",
"firstName": "Vetle",
"lastName": "Aasland",
"picture": "https://randomuser.me/api/portraits/med/men/97.jpg"
}
},
{
"id": "60d21b3667d0d8992e610c56",
"image": "https://img.dummyapi.io/photo-1558556249-076e42967a24.jpg",
"likes": 27,
"tags": [
"dog",
"animal",
"canine"
],
"text": "two puppies next to each other",
"publishDate": "2020-05-21T07:03:58.248Z",
"owner": {
"id": "60d0fe4f5311236168a10a1a",
"title": "mr",
"firstName": "Vaino",
"lastName": "Sakala",
"picture": "https://randomuser.me/api/portraits/med/men/56.jpg"
}
},
{
"id": "60d21b0767d0d8992e610bcf",
"image": "https://img.dummyapi.io/photo-1556526588-a0bd9b5a42c3.jpg",
"likes": 54,
"tags": [
"canine",
"dog",
"pet"
],
"text": "two white dogs",
"publishDate": "2020-05-21T02:10:33.421Z",
"owner": {
"id": "60d0fe4f5311236168a109fa",
"title": "ms",
"firstName": "Ann",
"lastName": "Mason",
"picture": "https://randomuser.me/api/portraits/med/women/18.jpg"
}
},
{
"id": "60d21afd67d0d8992e610bad",
"image": "https://img.dummyapi.io/photo-1575495679620-2ff225c75d5a.jpg",
"likes": 20,
"tags": [
"pet",
"animal",
"mammal"
],
"text": "A picture of my golden doodle, Yogi Bear white dog",
"publishDate": "2020-05-20T21:49:33.321Z",
"owner": {
"id": "60d0fe4f5311236168a10a2c",
"title": "mr",
"firstName": "Toralf",
"lastName": "Streicher",
"picture": "https://randomuser.me/api/portraits/med/men/80.jpg"
}
},
{
"id": "60d21b0467d0d8992e610bc5",
"image": "https://img.dummyapi.io/photo-1549937334-e94f33e69787.jpg",
"likes": 5,
"tags": [
"dog",
"pet",
"mammal"
],
"text": "long-coated brown dog",
"publishDate": "2020-05-20T21:00:40.371Z",
"owner": {
"id": "60d0fe4f5311236168a10a0d",
"title": "mr",
"firstName": "Lyam",
"lastName": "Morin",
"picture": "https://randomuser.me/api/portraits/med/men/95.jpg"
}
},
{
"id": "60d21bf367d0d8992e610e88",
"image": "https://img.dummyapi.io/photo-1564849444446-f876dcef378e.jpg",
"likes": 40,
"tags": [
"plant",
"mammal",
"pet"
],
"text": "A feral cat short-fur gray and orange cat on green...",
"publishDate": "2020-05-20T18:51:23.478Z",
"owner": {
"id": "60d0fe4f5311236168a109f4",
"title": "mr",
"firstName": "Benjamin",
"lastName": "Holland",
"picture": "https://randomuser.me/api/portraits/med/men/58.jpg"
}
}
],
"total": 873,
"page": 0,
"limit": 20
}
How can I map all elements and by example display every posts ids ? where is my error, please?
import React from "react";
import axios from "axios";
import { useQuery } from "react-query";
export default function Home() {
async function fetcher() {
const res = await axios.get("https://dummyapi.io/data/v1/post", {
headers: {
"app-id": "#####",
},
});
return res.data;
}
const { isLoading, data } = useQuery("getPosts", () => fetcher());
// console.log(data)
if (isLoading) {
return <p> IsLoading... </p>;
}
return (
<div>
{data.map((e) => (
<p key={e}> {e.id} </p>
))}
</div>
);
}
You are getting an object from the API, you should access the data property and then map over it. Also make the fetcher async.
How do I remove substring "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\n" from href example below?
I trying web scrape using Kimonolabs. I am a novice but output has 2 "http://" for some reason
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/healthcare-and-medical-jobs/qualified-flexible-carers/23434",
{
"name": "DoneDealTitleWexford",
"count": 20,
"frequency": "Manual Crawl",
"version": 6,
"newdata": true,
"lastrunstatus": "success",
"thisversionstatus": "success",
"thisversionrun": "Sun Jun 14 2015 11:40:14 GMT+0000 (UTC)",
"results": {
"collection1": [
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/healthcare-and-medical-jobs/qualified-flexible-carers/23434",
"text": "Qualified Flexible Carer(s)",
"title": "Qualified Flexible Carer(s)"
},
"index": 1,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/motor-mechanic-jobs/apprentice-mechanic/23454",
"text": "Apprentice Mechanic",
"title": "Apprentice Mechanic"
},
"index": 2,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/sales-jobs/full-time-summer-job-with-a-base-wage-uncapped-commission/24432",
"text": "Full-time summer job with a base wage + uncapped commission",
"title": "Full-time summer job with a base wage + uncapped commission"
},
"index": 3,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/sales-jobs/residential-sales-team-leader/24431",
"text": "Residential Sales Team Leader",
"title": "Residential Sales Team Leader"
},
"index": 4,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/pharmaceutical-and-science-jobs/associate-scientist/24506",
"text": "Associate Scientist",
"title": "Associate Scientist"
},
"index": 5,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/restaurant-and-catering-jobs/restaurant-manager/24505",
"text": "Restaurant Manager",
"title": "Restaurant Manager"
},
"index": 6,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/pharmaceutical-and-science-jobs/microbiologist-qa-specialist/24504",
"text": "Microbiologist/ QA Specialist",
"title": "Microbiologist/ QA Specialist "
},
"index": 7,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/pharmaceutical-and-science-jobs/quality-control-analyst-/24500",
"text": "Quality Control Analyst.",
"title": "Quality Control Analyst."
},
"index": 8,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/accountancy-and-finance-jobs/retail-cash-office-job-in-dublin/24497",
"text": "Retail Cash Office Job in Dublin",
"title": "Retail Cash Office Job in Dublin "
},
"index": 9,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/project-manager-jobs/project-manager-translation-localisation/24496",
"text": "Project Manager - Translation / Localisation",
"title": "Project Manager - Translation / Localisation"
},
"index": 10,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/pharmaceutical-and-science-jobs/regulatory-affairs-specialist/24495",
"text": "Regulatory Affairs Specialist",
"title": "Regulatory Affairs Specialist "
},
"index": 11,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/manufacturing-jobs/sign-makers/24494",
"text": "Sign Makers",
"title": "Sign Makers"
},
"index": 12,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/hotel-jobs/bakery-supervisor-job-in-cork/24493",
"text": "Bakery Supervisor Job in Cork",
"title": "Bakery Supervisor Job in Cork "
},
"index": 13,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/hotel-jobs/baker-job-in-cork-city/24492",
"text": "Baker Job in Cork City",
"title": "Baker Job in Cork City "
},
"index": 14,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/hotel-jobs/duty-manager/24491",
"text": "Duty Manager",
"title": "Duty Manager"
},
"index": 15,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/accountancy-and-finance-jobs/senior-accounts-assistant-accounting-technician/24489",
"text": "Senior Accounts Assistant / Accounting Technician",
"title": "Senior Accounts Assistant / Accounting Technician"
},
"index": 16,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/accountancy-and-finance-jobs/accountant-senior-accounting-technician-german-speaking/24488",
"text": "Accountant / Senior Accounting Technician (German Speaking)",
"title": "Accountant / Senior Accounting Technician (German Speaking) "
},
"index": 17,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/accountancy-and-finance-jobs/credit-controller/24487",
"text": "Credit Controller",
"title": "Credit Controller"
},
"index": 18,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/accountancy-and-finance-jobs/revenue-analyst/24486",
"text": "Revenue Analyst",
"title": "Revenue Analyst"
},
"index": 19,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
},
{
"Title": {
"href": "http://jobs.donedeal.ie/search/\n\n\n\n\n\n\n\n\nhttp://jobs.donedeal.ie/view/accountancy-and-finance-jobs/accounts-receivable-team-lead-multiples-retail/24485",
"text": "Accounts Receivable Team Lead – Multiples / Retail",
"title": "Accounts Receivable Team Lead – Multiples / Retail"
},
"index": 20,
"url": "http://jobs.donedeal.ie/search/find&county=Wexford&Submit=Search"
}
]
}
}
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;
};
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 ]}.