Related
I have 2 api:
Having bank details
Other having user account detail.
User can have more than 1 account with 1 bank. I have to fetch bank name and logo from bank api, and show all the user accounts with name, amount banks name and logo.
Two api data looks like below :
Bank API:
[
{
"id": 2,
"name": "KlikBCA",
"bank_code": "KlikBCA",
"country_code": "ID",
"country_name": "India",
"logo": "url",
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
},
{
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
]
User API:
[
{
"id": "sdf",
"bankId": "7",
"data": [
{
"accountId": “1234”,
"accountHolder": "John Doe",
"accountNumber": "587-2673-989",
"balances": {
"available": 500000,
}
},
{
"accountId": “2345”,
"accountHolder": "John Doe",
"accountNumber": "987-0675-789",
"balances": {
"available": 7500000
}
}
]
},
{
"id": "f230",
"bankId": "3",
"data": [
{
"accountId": "9876",
"accountHolder": "Charls",
"accountNumber": "765-6543-345",
"balances": {
"available": 200000
}
}
]
}
]
i need data to be like this..so that I can use it in my next component, which will take each account with all the bank details.
[
{
"id": "sdf",
"bankId": "7",
"data":
{
"accountId": “1234”,
"accountHolder": "John Doe",
"accountNumber": "587-2673-989",
"balances": {
"available": 500000,
}
},
"bank":{
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
},
{"id": "sdf",
"bankId": "7",
"data": {
"accountId": “2345”,
"accountHolder": "John Doe",
"accountNumber": "987-0675-789",
"balances": {
"available": 7500000
}
},
"bank":{
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
},
{
"id": "f230",
"bankId": "3",
"data": {
"accountId": "9876",
"accountHolder": "Charls",
"accountNumber": "765-6543-345",
"balances": {
"available": 200000
},
"bank":{
"name": "Mandiri",
"bank_code": "Mandiri",
"country_code": "ID",
"country_name": "India",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
}
}
]
You can use loop to merge two api json into one,
this is my code.
hope I can help u.
const banks = [{
"id": 2,
"name": "KlikBCA",
"bank_code": "KlikBCA",
"country_code": "ID",
"country_name": "India",
"logo": "url",
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}, {
"id": 3,
"name": "Mandiri",
"bank_code": "Mandiri",
"country_code": "ID",
"country_name": "India",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}, {
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}]
const users = [{
"id": "sdf",
"bankId": "7",
"data": [{
"accountId": "1234",
"accountHolder": "John Doe",
"accountNumber": "587-2673-989",
"balances": {
"available": 500000,
}
}, {
"accountId": "2345",
"accountHolder": "John Doe",
"accountNumber": "987-0675-789",
"balances": {
"available": 7500000
}
}]
}, {
"id": "f230",
"bankId": "3",
"data": [{
"accountId": "9876",
"accountHolder": "Charls",
"accountNumber": "765-6543-345",
"balances": {
"available": 200000
}
}]
}]
let resultApi = users.map(u => {
const t = banks.find(b => b.id == u.bankId) || {}
return {
...u,
...t
}
})
console.log(resultApi);
first of all, a feedback, you should write json inside code blocks for readability.
your question seems incomplete as what you want to achieve? you want to show these data in UI (html) or create a new json? and how far have you tried?
try to share a codesandbox/codepen link.
remember, you need to loop through both the arrays and first store bank data inside user's account by matching user.bankId === bank.id and then with the new data set you can show it wherever you want. give it a try first and then let us know in comments if you're unable to achieve.
I'm having problems with my code, where I need to pick data with a JSON query from an API.
Here is the JSON body what I receive from the query:
{
"status": "success",
"reservations": [
{
"id": "38199",
"subject": "Koneiden vaihto",
"modifiedDate": "2017-05-16T12:46:17",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "124",
"type": "room",
"code": "FRAMIF407",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F407 (atk 34)"
}
],
"description": ""
},
{
"id": "30505",
"subject": "Alumnitapahtuman etukäteisjärjestelyt",
"modifiedDate": "2017-04-19T09:36:02",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "104",
"type": "room",
"code": "FRAMIF144",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F144 (lasipalatsi 120)"
}
],
"description": ""
},
{
"id": "38864",
"subject": "Koneiden vaihto/säilytystila",
"modifiedDate": "2017-06-21T06:03:07",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "107",
"type": "room",
"code": "FRAMIF211",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F211 (fysioterapia/teoria)"
}
],
"description": ""
},
{
"id": "38335",
"subject": "Koneiden vaihto",
"modifiedDate": "2017-05-16T12:48:32",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "127",
"type": "room",
"code": "FRAMIF410",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F410 (atk 34)"
}
],
"description": ""
},
{
"id": "38426",
"subject": "Koneiden vaihto",
"modifiedDate": "2017-05-16T12:49:25",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "128",
"type": "room",
"code": "FRAMIF411",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F411 (atk 34)"
}
],
"description": ""
},
{
"id": "43898",
"subject": "Varattu plinttien varastointiin",
"modifiedDate": "2017-06-12T08:54:31",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "106",
"type": "room",
"code": "FRAMIF210",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F210 (teoria 36)"
}
],
"description": ""
},
{
"id": "38267",
"subject": "Koneiden vaihto",
"modifiedDate": "2017-06-21T06:03:07",
"startDate": "2017-06-21T08:00:00",
"endDate": "2017-06-21T22:00:00",
"resources": [
{
"id": "126",
"type": "room",
"code": "FRAMIF409",
"parent": {
"id": "4",
"type": "building",
"code": "FramiF",
"name": "Frami F"
},
"name": "Frami F409 (atk 34)"
}
],
"description": ""
}
]
}
I need to pick up the all the names from the body, which are for example :
"Frami F407 (atk 34)", "Frami F144 (lasipalatsi 120)",
"Frami F211 (fysioterapia/teoria)", "Frami F410 (atk 34)
Here's how I process the data in order to get the names;
var jsonQuery = {
"startDate": startDate,
"endDate": endDate,
"building": [building]
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(xhr.responseText);
var rooms = [];
for (var i = 0; i < json.reservations.length; i++) {
if (json.reservations[i].resources != null) {
for (var j = 0; j < json.reservations[i].resources.length; j++) {
var reservation = json.reservations[i];
var resource = json.reservations[i].resources[j];
if (resource.type === "room") {
if (rooms.indexOf("code")) {
rooms.push(resource.name);
}
}
}
}
}
}
};
xhr.open("POST", "URL", true, "API-key", "");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(jsonQuery));
This is how it should work : https://jsfiddle.net/p474djan/3/
But the problem is, when I run it through JSON.parse() and check in the console log, it keeps the first two names ("Frami F407 (atk 34)" and "Frami F144 (lasipalatsi 120)") but removes all the rest of the names. Any idea why this is happening?
I am not able to find any issue on your code but here it is my suggestion you can achieve the same via underscore.js without any looping and so on
https://jsfiddle.net/p474djan/5/
document.getElementById("pageOne").innerHTML = _.pluck(_.flatten(_.pluck(json["reservations"], 'resources')), 'name').join("<br/>")
Please have a look in to this
I have two arrays like this :
var friendemail = [ {
"data": {
"status": "OK",
"message": "User list fetched successfully",
"userList": [
{
"userId": 1,
"emailId": "abc.com",
"firstName": "Abc",
"lastName": "Xyz",
"nickName": "Nic",
"type": "USER",
"apiKey": "355901361"
},
{
"userId": 2,
"emailId": "babitadhami#g.com",
"firstName": "Babita",
"lastName": "Dhami",
"nickName": "bobby",
"type": "USER",
"apiKey": "333234567"
},
{
"userId": 3,
"emailId": "testuser#g.com",
"firstName": "Test_User",
"lastName": "Account",
"nickName": "Testi",
"type": "USER",
"apiKey": "1403626362113"
},
{
"userId": 4,
"emailId": "dhami#gmail.com",
"firstName": "dhami",
"lastName": "Dhami",
"nickName": "bobby",
"type": "DEVELOPER",
"apiKey": "222234567"
},
{
"userId": 5,
"emailId": "babita.dhami#g.com",
"firstName": "Babita",
"lastName": "Dhami",
"nickName": "bobby",
"type": "USER",
"apiKey": "1403709178117"
},
{
"userId": 6,
"emailId": "Chris#abc.com",
"firstName": "dhami",
"lastName": "dhami",
"nickName": "dhami",
"type": "DEVELOPER",
"apiKey": "333234567"
},
{
"userId": 7,
"emailId": "kevin.wei#qdevinc.com",
"firstName": "abc",
"lastName": "xyz",
"nickName": "none",
"type": "DEVELOPER",
"apiKey": "111234567"
},
{
"userId": 8,
"emailId": "dhamji#gmail.com",
"firstName": "Bab",
"lastName": "Dham",
"nickName": "bobby",
"type": "USER",
"apiKey": "1403790266057"
},
{
"userId": 9,
"emailId": "info#hemlockhills.ca",
"firstName": "Jenn",
"lastName": "Becker",
"nickName": "JennB",
"type": "USER",
"apiKey": "355901361"
},
{
"userId": 10,
"emailId": "babitadhami1#gmail.com",
"firstName": "Babita",
"lastName": "Dhami",
"nickName": "bobby",
"type": "USER",
"apiKey": "333234567"
},
{
"userId": 11,
"emailId": "b.dhami#g.com",
"firstName": "Babita",
"lastName": "Dhami",
"nickName": "bobby",
"type": "USER",
"apiKey": "333234567"
},
{
"userId": 12,
"emailId": "dhami.babita#g.com",
"firstName": "Babita",
"lastName": "Dhami",
"nickName": "bobby",
"type": "USER",
"apiKey": "333234567"
},
{
"userId": 13,
"emailId": "Francie#abc.com",
"firstName": "Francie",
"lastName": "Francie",
"nickName": "Francie",
"type": "USER",
"apiKey": "111234567"
},
{
"userId": 14,
"emailId": "Sam#abc.com",
"firstName": "Sam",
"lastName": "M",
"nickName": "S",
"type": "USER",
"apiKey": "111234567"
},
{
"userId": 15,
"emailId": "Sid#abc.com",
"firstName": "Sid",
"lastName": "B",
"nickName": "S",
"type": "USER",
"apiKey": "22234567"
},
{
"userId": 16,
"emailId": "tim#outlook.com",
"firstName": "tim",
"lastName": "tim",
"nickName": "tim",
"type": "USER",
"apiKey": "111234567"
},
{
"userId": 17,
"emailId": "racing#gmail.com",
"firstName": "racing",
"lastName": "racing",
"nickName": "Hollywood",
"type": "USER",
"apiKey": "222234567"
}
]
},
"status": 200,
"config": {
"method": "GET",
"transformRequest": [
null
],
"transformResponse": [
null
],
"url": "",
"headers": {
"Accept": "application/json, text/plain, */*"
}
},
"statusText": "OK"
}]
and another is
var deviceContactEmail = [
{
"id": "1",
"rawId": "1",
"displayName": "kandwal",
"name": {
"formatted": "kandwal",
"givenName": "kandwal"
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "testuser#g.com",
"id": "6",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/1/photo",
"type": "url",
"id": "1",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "2",
"rawId": "2",
"displayName": "xyz",
"name": {
"formatted": "xyz ",
"givenName": "xyz"
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "Chris#abc.com",
"id": "12",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/2/photo",
"type": "url",
"id": "7",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "3",
"rawId": "3",
"displayName": "cdf",
"name": {
"formatted": "cdf",
"givenName": "cdf"
},
"nickname": null,
"phoneNumbers": null,
"emails": null,
"addresses": [
{
"region": "Uk",
"id": "19",
"locality": "Dehra Dun",
"formatted": "dddd",
"type": "home",
"pref": false,
"country": "India"
}
],
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/3/photo",
"type": "url",
"id": "14",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "4",
"rawId": "4",
"displayName": "abcd",
"name": {
"formatted": "scd ",
"givenName": "scd"
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "dhami#gmail.com",
"id": "26",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/4/photo",
"type": "url",
"id": "21",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "5",
"rawId": "5",
"displayName": "hiteshbhattcse#gmail.com",
"name": {
"formatted": "hiteshbhattcse#gmail.com ",
"givenName": "hiteshbhattcse#gmail.com"
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "hiteshbhattcse#gmail.com",
"id": "33",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/5/photo",
"type": "url",
"id": "28",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "6",
"rawId": "6",
"displayName": "hitet#gmail.com",
"name": {
"formatted": "hitet#gmail.com ",
"givenName": "hitet#gmail.com"
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "hiteshbhatt#gmail.com",
"id": "40",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/6/photo",
"type": "url",
"id": "35",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "7",
"rawId": "7",
"displayName": null,
"name": {
"formatted": ""
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "mayank.th088#gmail.com",
"id": "46",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/7/photo",
"type": "url",
"id": "41",
"pref": false
}
],
"categories": null,
"urls": null
},
{
"id": "8",
"rawId": "8",
"displayName": null,
"name": {
"formatted": ""
},
"nickname": null,
"phoneNumbers": null,
"emails": [
{
"type": "other",
"value": "gcjoshi83#gmail.com",
"id": "53",
"pref": false
}
],
"addresses": null,
"ims": null,
"organizations": null,
"birthday": null,
"note": "",
"photos": [
{
"value": "content://com.android.contacts/contacts/8/photo",
"type": "url",
"id": "48",
"pref": false
}
],
"categories": null,
"urls": null
}]
I want to compare both of them for email id . and wanna get the common email id inside 1 array and rest in one array from deviceContactEmail.
I tried angular. each but not getting success.
var wUser = [];
var nonWUser = [];
angular.forEach(deviceContactEmail, function(phonevalue){
console.log(phonevalue);
angular.forEach(friendemail, function(value){
if (phonevalue.emails) {
if(phonevalue.emails[0].value === value.emailId){
console.log(phonevalue.emails[0].value);
wUser.push(phonevalue);
}else{
console.log("------------------------------------------------------------------------");
console.log(phonevalue.emails[0].value);
nonWUser.push(phonevalue);
};
}
})
})
Hi Try this I solved to remove the duplicates value in the array check it...
var wUser = [];
var nonWUser = [];
angular.forEach(deviceContactEmail, function(phonevalue){
console.log(phonevalue);
angular.forEach(friendemail[0].data.userList, function (value) {
if (phonevalue.emails) {
if(phonevalue.emails[0].value === value.emailId){
console.log(phonevalue.emails[0].value);
wUser.push(phonevalue);
}
else {
console.log("------------------------------------------------------------------------");
console.log(phonevalue.emails[0].value);
if ($scope.nonWUser.length == 0) {
nonWUser.push(phonevalue);
}
var filteredVal= $scope.nonWUser.filter(function (filterValue) {
return filterValue.emails[0].value == phonevalue.emails[0].value;
});
if (filteredVal.length == 0)
nonWUser.push(phonevalue);
}
}
});
});
check the edited file
It seem you are not pointing the inner loop at the right list. friendemail is a list but contains only one item. I assume the emailId you are testing for is buried inside the data which happens to be child of friendemail. Try the code below
angular.forEach(deviceContactEmail, function(phonevalue) {
console.log("................ ",phonevalue, " ", friendemail[0].data.userList.length);
angular.forEach(friendemail[0].data.userList, function(value) {
if (phonevalue.emails) {
if (phonevalue.emails[0].value === value.emailId) {
console.log(phonevalue.emails[0].value);
wUser.push(phonevalue);
} else {
console.log("------------------------------------------------------------------------");
console.log(phonevalue.emails[0].value);
nonWUser.push(phonevalue);
}
;
}
})
})
I am trying to parse JSON data like this:
var baseUrl = 'https://api.themoviedb.org/3/movie/'
var movieID = '550'
var detailUrl = '&append_to_response=releases,trailers,credits&callback=?'
var apiKey = '?api_key=Removed_For_Privacy'
The above url with the api key include returns this result:
?({
"adult": false,
"backdrop_path": "/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg",
"belongs_to_collection": null,
"budget": 63000000,
"genres": [
{
"id": 28,
"name": "Action"
},
{
"id": 18,
"name": "Drama"
},
{
"id": 53,
"name": "Thriller"
}
],
"homepage": "",
"id": 550,
"imdb_id": "tt0137523",
"original_title": "Fight Club",
"overview": "A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground \"fight clubs\" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.",
"popularity": "10.2188172784825",
"poster_path": "/2lECpi35Hnbpa4y46JX0aY3AWTy.jpg",
"production_companies": [
{
"name": "20th Century Fox",
"id": 25
},
{
"name": "Fox 2000 Pictures",
"id": 711
},
{
"name": "Regency Enterprises",
"id": 508
}
],
"production_countries": [
{
"iso_3166_1": "DE",
"name": "Germany"
},
{
"iso_3166_1": "US",
"name": "United States of America"
}
],
"release_date": "1999-10-14",
"revenue": 100853753,
"runtime": 139,
"spoken_languages": [
{
"iso_639_1": "en",
"name": "English"
}
],
"status": "Released",
"tagline": "How much can you know about yourself if you've never been in a fight?",
"title": "Fight Club",
"vote_average": 7.6,
"vote_count": 2787,
"releases": {
"countries": [
{
"iso_3166_1": "US",
"certification": "R",
"release_date": "1999-10-14"
},
{
"iso_3166_1": "DE",
"certification": "18",
"release_date": "1999-11-10"
},
{
"iso_3166_1": "GB",
"certification": "18",
"release_date": "1999-11-12"
},
{
"iso_3166_1": "FR",
"certification": "16",
"release_date": "1999-11-10"
},
{
"iso_3166_1": "TR",
"certification": "",
"release_date": "1999-12-10"
},
{
"iso_3166_1": "BR",
"certification": "feibris",
"release_date": "1999-07-12"
},
{
"iso_3166_1": "FI",
"certification": "K-18",
"release_date": "1999-11-12"
},
{
"iso_3166_1": "BG",
"certification": "c",
"release_date": "2012-08-28"
},
{
"iso_3166_1": "IT",
"certification": "VM14",
"release_date": "1999-10-29"
}
]
},
"trailers": {
"quicktime": [],
"youtube": [
{
"name": "Trailer 1",
"size": "HD",
"source": "SUXWAEX2jlg",
"type": "Trailer"
}
]
},
"credits": {
"cast": [
{
"id": 819,
"name": "Edward Norton",
"character": "The Narrator",
"order": 0,
"cast_id": 4,
"profile_path": "/iUiePUAQKN4GY6jorH9m23cbVli.jpg"
},
{
"id": 287,
"name": "Brad Pitt",
"character": "Tyler Durden",
"order": 1,
"cast_id": 5,
"profile_path": "/kc3M04QQAuZ9woUvH3Ju5T7ZqG5.jpg"
},
{
"id": 1283,
"name": "Helena Bonham Carter",
"character": "Marla Singer",
"order": 2,
"cast_id": 6,
"profile_path": "/58oJPFG1wefMC0Vj7sFzHPrm67J.jpg"
},
{
"id": 7470,
"name": "Meat Loaf",
"character": "Robert 'Bob' Paulson",
"order": 3,
"cast_id": 7,
"profile_path": "/pwNyXgegO1nlZ8uWT847JM8EjGj.jpg"
},
{
"id": 7499,
"name": "Jared Leto",
"character": "Angel Face",
"order": 4,
"cast_id": 30,
"profile_path": "/msugySeTCyCmlRWtyB6sMixTQYY.jpg"
},
{
"id": 7471,
"name": "Zach Grenier",
"character": "Richard Chesler",
"order": 5,
"cast_id": 31,
"profile_path": "/jghYiKdNkVehKpiVyE97AWrU9KQ.jpg"
},
{
"id": 7497,
"name": "Holt McCallany",
"character": "The Mechanic",
"order": 6,
"cast_id": 32,
"profile_path": "/hQBfcw9KVszdenlTZTR8AIrSpex.jpg"
},
{
"id": 7498,
"name": "Eion Bailey",
"character": "Ricky",
"order": 7,
"cast_id": 33,
"profile_path": "/4MnRgrwuiJvHsfoiJrIUL4TkfoC.jpg"
}
],
"crew": [
{
"id": 7469,
"name": "Jim Uhls",
"department": "Writing",
"job": "Author",
"profile_path": null
},
{
"id": 7474,
"name": "Ross Grayson Bell",
"department": "Production",
"job": "Producer",
"profile_path": null
},
{
"id": 7475,
"name": "Ceán Chaffin",
"department": "Production",
"job": "Producer",
"profile_path": null
},
{
"id": 1254,
"name": "Art Linson",
"department": "Production",
"job": "Producer",
"profile_path": "/dEtVivCXxQBtIzmJcUNupT1AB4H.jpg"
},
{
"id": 7477,
"name": "John King",
"department": "Sound",
"job": "Original Music Composer",
"profile_path": null
},
{
"id": 7478,
"name": "Michael Simpson",
"department": "Sound",
"job": "Original Music Composer",
"profile_path": null
},
{
"id": 7479,
"name": "Jeff Cronenweth",
"department": "Camera",
"job": "Director of Photography",
"profile_path": null
},
{
"id": 7480,
"name": "James Haygood",
"department": "Editing",
"job": "Editor",
"profile_path": null
},
{
"id": 7481,
"name": "Laray Mayfield",
"department": "Production",
"job": "Casting",
"profile_path": null
},
{
"id": 1303,
"name": "Alex McDowell",
"department": "Art",
"job": "Production Design",
"profile_path": null
},
{
"id": 7763,
"name": "Ren Klyce",
"department": "Sound",
"job": "Sound Editor",
"profile_path": null
},
{
"id": 7764,
"name": "Richard Hymns",
"department": "Sound",
"job": "Sound Editor",
"profile_path": null
},
{
"id": 7467,
"name": "David Fincher",
"department": "Directing",
"job": "Director",
"profile_path": "/dcBHejOsKvzVZVozWJAPzYthb8X.jpg"
},
{
"id": 7468,
"name": "Chuck Palahniuk",
"department": "Writing",
"job": "Novel",
"profile_path": "/8nOJDJ6SqwV2h7PjdLBDTvIxXvx.jpg"
}
]
}
})
I use this to parse it, however i have no luck
$(document).ready(function() {
$.ajax({
url: baseUrl + movieID +apiKey +detailUrl,
dataType: "jsonp",
success: getGenres,
});
});
function getGenres(data) {
var entries = data
genre = 0,
genre_list = '';
for (genre = 0; genre < entries.genres.name.length; genre++) {
genre_list.push(entries.genres.name[genre]);
}
document.getElementById('Genres').innerHTML = genre_list.join(', ');
Please Help
entries.genres is an Array. It has no .name property. You should be getting an error in your browser's developer console for accessing .length of undefined.
{
"adult": false,
"backdrop_path": "/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg",
"belongs_to_collection": null,
"budget": 63000000,
"genres": [
{
"id": 28,
"name": "Action"
},
{
"id": 18,
"name": "Drama"
},
{
"id": 53,
"name": "Thriller"
}
],
...
}
So you need to iterate entries.genres, then push the .name of the current genre if that's what you want.
for (genre = 0; genre < entries.genres.length; genre++) {
genre_list.push(entries.genres[genre].name);
}
On a different note, you have two implicit globals.
var entries = data
genre = 0,
genre_list = '';
By forgetting the comma after var entries = data, the next two lines will implicitly create global variables since they're not part of the var statement.
That's why I always use leading commas for variable declarations. Makes it obvious when a comma is missing.
var entries = data
, genre = 0
, genre_list = '';
test.php
<?php
echo 'getGenres({
"adult": false,
"backdrop_path": "/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg",
"belongs_to_collection": null,
"budget": 63000000,
"genres": [
{
"id": 28,
"name": "Action"
},
{
"id": 18,
"name": "Drama"
},
{
"id": 53,
"name": "Thriller"
}
],
"homepage": "",
"id": 550,
"imdb_id": "tt0137523",
"original_title": "Fight Club",
"overview": "A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground \"fight clubs\" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.",
"popularity": "10.2188172784825",
"poster_path": "/2lECpi35Hnbpa4y46JX0aY3AWTy.jpg",
"production_companies": [
{
"name": "20th Century Fox",
"id": 25
},
{
"name": "Fox 2000 Pictures",
"id": 711
},
{
"name": "Regency Enterprises",
"id": 508
}
],
"production_countries": [
{
"iso_3166_1": "DE",
"name": "Germany"
},
{
"iso_3166_1": "US",
"name": "United States of America"
}
],
"release_date": "1999-10-14",
"revenue": 100853753,
"runtime": 139,
"spoken_languages": [
{
"iso_639_1": "en",
"name": "English"
}
],
"status": "Released",
"tagline": "How much can you know about yourself if youve never been in a fight?",
"title": "Fight Club",
"vote_average": 7.6,
"vote_count": 2787,
"releases": {
"countries": [
{
"iso_3166_1": "US",
"certification": "R",
"release_date": "1999-10-14"
},
{
"iso_3166_1": "DE",
"certification": "18",
"release_date": "1999-11-10"
},
{
"iso_3166_1": "GB",
"certification": "18",
"release_date": "1999-11-12"
},
{
"iso_3166_1": "FR",
"certification": "16",
"release_date": "1999-11-10"
},
{
"iso_3166_1": "TR",
"certification": "",
"release_date": "1999-12-10"
},
{
"iso_3166_1": "BR",
"certification": "feibris",
"release_date": "1999-07-12"
},
{
"iso_3166_1": "FI",
"certification": "K-18",
"release_date": "1999-11-12"
},
{
"iso_3166_1": "BG",
"certification": "c",
"release_date": "2012-08-28"
},
{
"iso_3166_1": "IT",
"certification": "VM14",
"release_date": "1999-10-29"
}
]
},
"trailers": {
"quicktime": [],
"youtube": [
{
"name": "Trailer 1",
"size": "HD",
"source": "SUXWAEX2jlg",
"type": "Trailer"
}
]
},
"credits": {
"cast": [
{
"id": 819,
"name": "Edward Norton",
"character": "The Narrator",
"order": 0,
"cast_id": 4,
"profile_path": "/iUiePUAQKN4GY6jorH9m23cbVli.jpg"
},
{
"id": 287,
"name": "Brad Pitt",
"character": "Tyler Durden",
"order": 1,
"cast_id": 5,
"profile_path": "/kc3M04QQAuZ9woUvH3Ju5T7ZqG5.jpg"
},
{
"id": 1283,
"name": "Helena Bonham Carter",
"character": "Marla Singer",
"order": 2,
"cast_id": 6,
"profile_path": "/58oJPFG1wefMC0Vj7sFzHPrm67J.jpg"
},
{
"id": 7470,
"name": "Meat Loaf",
"character": "Robert Bob Paulson",
"order": 3,
"cast_id": 7,
"profile_path": "/pwNyXgegO1nlZ8uWT847JM8EjGj.jpg"
},
{
"id": 7499,
"name": "Jared Leto",
"character": "Angel Face",
"order": 4,
"cast_id": 30,
"profile_path": "/msugySeTCyCmlRWtyB6sMixTQYY.jpg"
},
{
"id": 7471,
"name": "Zach Grenier",
"character": "Richard Chesler",
"order": 5,
"cast_id": 31,
"profile_path": "/jghYiKdNkVehKpiVyE97AWrU9KQ.jpg"
},
{
"id": 7497,
"name": "Holt McCallany",
"character": "The Mechanic",
"order": 6,
"cast_id": 32,
"profile_path": "/hQBfcw9KVszdenlTZTR8AIrSpex.jpg"
},
{
"id": 7498,
"name": "Eion Bailey",
"character": "Ricky",
"order": 7,
"cast_id": 33,
"profile_path": "/4MnRgrwuiJvHsfoiJrIUL4TkfoC.jpg"
}
],
"crew": [
{
"id": 7469,
"name": "Jim Uhls",
"department": "Writing",
"job": "Author",
"profile_path": null
},
{
"id": 7474,
"name": "Ross Grayson Bell",
"department": "Production",
"job": "Producer",
"profile_path": null
},
{
"id": 7475,
"name": "Ceán Chaffin",
"department": "Production",
"job": "Producer",
"profile_path": null
},
{
"id": 1254,
"name": "Art Linson",
"department": "Production",
"job": "Producer",
"profile_path": "/dEtVivCXxQBtIzmJcUNupT1AB4H.jpg"
},
{
"id": 7477,
"name": "John King",
"department": "Sound",
"job": "Original Music Composer",
"profile_path": null
},
{
"id": 7478,
"name": "Michael Simpson",
"department": "Sound",
"job": "Original Music Composer",
"profile_path": null
},
{
"id": 7479,
"name": "Jeff Cronenweth",
"department": "Camera",
"job": "Director of Photography",
"profile_path": null
},
{
"id": 7480,
"name": "James Haygood",
"department": "Editing",
"job": "Editor",
"profile_path": null
},
{
"id": 7481,
"name": "Laray Mayfield",
"department": "Production",
"job": "Casting",
"profile_path": null
},
{
"id": 1303,
"name": "Alex McDowell",
"department": "Art",
"job": "Production Design",
"profile_path": null
},
{
"id": 7763,
"name": "Ren Klyce",
"department": "Sound",
"job": "Sound Editor",
"profile_path": null
},
{
"id": 7764,
"name": "Richard Hymns",
"department": "Sound",
"job": "Sound Editor",
"profile_path": null
},
{
"id": 7467,
"name": "David Fincher",
"department": "Directing",
"job": "Director",
"profile_path": "/dcBHejOsKvzVZVozWJAPzYthb8X.jpg"
},
{
"id": 7468,
"name": "Chuck Palahniuk",
"department": "Writing",
"job": "Novel",
"profile_path": "/8nOJDJ6SqwV2h7PjdLBDTvIxXvx.jpg"
}
]
}
})';
exit;
?>
javascript code:
<script language="javascript">
jq(document).ready(function() {
jq.ajax({
url: 'test.php',
dataType: "jsonp",
}); });
function getGenres(data){
alert(data.genres.length);
}
</script>
Your json response contains single quotes (') example 'bob' and you've which are not standard, so replace then by \' and then parse your json response.
For reference check jQuery single quote in JSON response
Remove ?( and ) from the starting and end of json response and also remove ' from them and check
var obj = jQuery.parseJSON( '{"adult":false,"backdrop_path":"/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg","belongs_to_collection":null,"budget":63000000,"genres":[{"id":28,"name":"Action"},{"id":18,"name":"Drama"},{"id":53,"name":"Thriller"}],"homepage":"","id":550,"imdb_id":"tt0137523","original_title":"Fight Club","overview":"A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground fight clubs forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.","popularity":"10.2188172784825","poster_path":"/2lECpi35Hnbpa4y46JX0aY3AWTy.jpg","production_companies":[{"name":"20th Century Fox","id":25},{"name":"Fox 2000 Pictures","id":711},{"name":"Regency Enterprises","id":508}],"production_countries":[{"iso_3166_1":"DE","name":"Germany"},{"iso_3166_1":"US","name":"United States of America"}],"release_date":"1999-10-14","revenue":100853753,"runtime":139,"spoken_languages":[{"iso_639_1":"en","name":"English"}],"status":"Released","tagline":"How much can you know about yourself if youve never been in a fight?","title":"Fight Club","vote_average":7.6,"vote_count":2787,"releases":{"countries":[{"iso_3166_1":"US","certification":"R","release_date":"1999-10-14"},{"iso_3166_1":"DE","certification":"18","release_date":"1999-11-10"},{"iso_3166_1":"GB","certification":"18","release_date":"1999-11-12"},{"iso_3166_1":"FR","certification":"16","release_date":"1999-11-10"},{"iso_3166_1":"TR","certification":"","release_date":"1999-12-10"},{"iso_3166_1":"BR","certification":"feibris","release_date":"1999-07-12"},{"iso_3166_1":"FI","certification":"K-18","release_date":"1999-11-12"},{"iso_3166_1":"BG","certification":"c","release_date":"2012-08-28"},{"iso_3166_1":"IT","certification":"VM14","release_date":"1999-10-29"}]},"trailers":{"quicktime":[],"youtube":[{"name":"Trailer 1","size":"HD","source":"SUXWAEX2jlg","type":"Trailer"}]},"credits":{"cast":[{"id":819,"name":"Edward Norton","character":"The Narrator","order":0,"cast_id":4,"profile_path":"/iUiePUAQKN4GY6jorH9m23cbVli.jpg"},{"id":287,"name":"Brad Pitt","character":"Tyler Durden","order":1,"cast_id":5,"profile_path":"/kc3M04QQAuZ9woUvH3Ju5T7ZqG5.jpg"},{"id":1283,"name":"Helena Bonham Carter","character":"Marla Singer","order":2,"cast_id":6,"profile_path":"/58oJPFG1wefMC0Vj7sFzHPrm67J.jpg"},{"id":7470,"name":"Meat Loaf","character":"Robert Bob Paulson","order":3,"cast_id":7,"profile_path":"/pwNyXgegO1nlZ8uWT847JM8EjGj.jpg"},{"id":7499,"name":"Jared Leto","character":"Angel Face","order":4,"cast_id":30,"profile_path":"/msugySeTCyCmlRWtyB6sMixTQYY.jpg"},{"id":7471,"name":"Zach Grenier","character":"Richard Chesler","order":5,"cast_id":31,"profile_path":"/jghYiKdNkVehKpiVyE97AWrU9KQ.jpg"},{"id":7497,"name":"Holt McCallany","character":"The Mechanic","order":6,"cast_id":32,"profile_path":"/hQBfcw9KVszdenlTZTR8AIrSpex.jpg"},{"id":7498,"name":"Eion Bailey","character":"Ricky","order":7,"cast_id":33,"profile_path":"/4MnRgrwuiJvHsfoiJrIUL4TkfoC.jpg"}],"crew":[{"id":7469,"name":"Jim Uhls","department":"Writing","job":"Author","profile_path":null},{"id":7474,"name":"Ross Grayson Bell","department":"Production","job":"Producer","profile_path":null},{"id":7475,"name":"Ceán Chaffin","department":"Production","job":"Producer","profile_path":null},{"id":1254,"name":"Art Linson","department":"Production","job":"Producer","profile_path":"/dEtVivCXxQBtIzmJcUNupT1AB4H.jpg"},{"id":7477,"name":"John King","department":"Sound","job":"Original Music Composer","profile_path":null},{"id":7478,"name":"Michael Simpson","department":"Sound","job":"Original Music Composer","profile_path":null},{"id":7479,"name":"Jeff Cronenweth","department":"Camera","job":"Director of Photography","profile_path":null},{"id":7480,"name":"James Haygood","department":"Editing","job":"Editor","profile_path":null},{"id":7481,"name":"Laray Mayfield","department":"Production","job":"Casting","profile_path":null},{"id":1303,"name":"Alex McDowell","department":"Art","job":"Production Design","profile_path":null},{"id":7763,"name":"Ren Klyce","department":"Sound","job":"Sound Editor","profile_path":null},{"id":7764,"name":"Richard Hymns","department":"Sound","job":"Sound Editor","profile_path":null},{"id":7467,"name":"David Fincher","department":"Directing","job":"Director","profile_path":"/dcBHejOsKvzVZVozWJAPzYthb8X.jpg"},{"id":7468,"name":"Chuck Palahniuk","department":"Writing","job":"Novel","profile_path":"/8nOJDJ6SqwV2h7PjdLBDTvIxXvx.jpg"}]}}' );
alert( obj.genres.length );
alert messages showing 3, so your json response is not valid
I have a json file returned on my javascript code. The file looks like this :
{
"data": [
{
"id": "594984240522886",
"from": {
"id": "593959083958735",
"category": "Community",
"name": "Decoc"
},
"name": "Ducks",
"description": "ducks",
"link": "http://www.facebook.com/album.php?fbid=594984240522886&id=593959083958735&aid=1073741834",
"cover_photo": "594984260522884",
"count": 4,
"type": "normal",
"created_time": "2013-06-13T15:12:22+0000",
"updated_time": "2013-06-13T15:12:40+0000",
"can_upload": false
},
{
"id": "593963787291598",
"from": {
"id": "593959083958735",
"category": "Community",
"name": "Decoc"
},
"name": "Profile Pictures",
"link": "http://www.facebook.com/album.php?fbid=593963787291598&id=593959083958735&aid=1073741832",
"cover_photo": "593963797291597",
"count": 1,
"type": "profile",
"created_time": "2013-06-11T16:52:29+0000",
"updated_time": "2013-06-11T16:52:31+0000",
"can_upload": false
},
{
"id": "593963467291630",
"from": {
"id": "593959083958735",
"category": "Community",
"name": "Decoc"
},
"name": "Goats",
"description": "goats",
"link": "http://www.facebook.com/album.php?fbid=593963467291630&id=593959083958735&aid=1073741831",
"cover_photo": "593963477291629",
"count": 7,
"type": "normal",
"created_time": "2013-06-11T16:51:56+0000",
"updated_time": "2013-06-11T16:52:02+0000",
"can_upload": false
},
{
"id": "593962700625040",
"from": {
"id": "593959083958735",
"category": "Community",
"name": "Decoc"
},
"name": "Dogs",
"description": "dogs",
"link": "http://www.facebook.com/album.php?fbid=593962700625040&id=593959083958735&aid=1073741830",
"cover_photo": "593962710625039",
"count": 10,
"type": "normal",
"created_time": "2013-06-11T16:50:27+0000",
"updated_time": "2013-06-11T16:50:37+0000",
"can_upload": false
},
{
"id": "593961937291783",
"from": {
"id": "593959083958735",
"category": "Community",
"name": "Decoc"
},
"name": "Cows",
"description": "Cows",
"link": "http://www.facebook.com/album.php?fbid=593961937291783&id=593959083958735&aid=1073741829",
"cover_photo": "593961983958445",
"count": 5,
"type": "normal",
"created_time": "2013-06-11T16:48:26+0000",
"updated_time": "2013-06-11T16:49:32+0000",
"can_upload": false
}
],
"paging": {
"cursors": {
"after": "NTkzOTYxOTM3MjkxNzgz",
"before": "NTk0OTg0MjQwNTIyODg2"
}
}
}
I would like to loop inside the "data" and see how many different data elements exist(as you see each element has an id , from , name , description..) . How can i do that with javascript?
You can try the following code:
for(i=0;json.data.length;i++){
var element = json.data[i];
}
or also in this other way:
for (i in json.data) {
if (json.data.hasOwnProperty(i)) {
var element = json.data[i];
}
}