We Keep Coding

get values from JSON given by randomuser.me and loop through to append in divs

hoping to use randomuser.me in a prototype i'm putting together (html, css, jquery)
I need to use its api to access profile photos.
I've got this code puling in the JSON as they show in their documentation:
$.ajax({
url: 'https://randomuser.me/api/?results=5&gender=female',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
Now I need to get the url from the picture value in the JSON and write it to the background-image css of a group of divs...I imagine by creating some kind of loop, anybody have an easy to understand way of doing this?
the JSON returned looks like this:
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "romain",
"last": "hoogmoed"
},
"location": {
"street": "1861 jan pieterszoon coenstraat",
"city": "maasdriel",
"state": "zeeland",
"postcode": 69217
},
"email": "romain.hoogmoed#example.com",
"login": {
"username": "lazyduck408",
"password": "jokers",
"salt": "UGtRFz4N",
"md5": "6d83a8c084731ee73eb5f9398b923183",
"sha1": "cb21097d8c430f2716538e365447910d90476f6e",
"sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
},
"dob": "1983-07-14 07:29:45",
"registered": "2010-09-24 02:10:42",
"phone": "(656)-976-4980",
"cell": "(065)-247-9303",
"id": {
"name": "BSN",
"value": "04242023"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/83.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
},
"nat": "NL"
}
],
"info": {
"seed": "2da87e9305069f1d",
"results": 1,
"page": 1,
"version": "1.1"
}
}

If I've got right you need something like this:
$( ".myDivClass" ).each(function( index ) {
$( this ).attr("background-image", results[index].picture.medium));
});
Or if you have in results only one element of array so to do: ...results[0].picture.medium...

how to export complex json to excel with alasql

I have a json like this (there might be some syntax errors, I did extract and rewrite some private data)
"todo-items": [{
"id": 3511710,
"company-name": "company1",
"author" : "Jon Doe",
"tags": [{
"id": 10101,
"name": "2.Marketing Sales",
"color": "#f78234"
}],
"creation-date": 20160101
}, {
"id": 3511474,
"company-name": "company1",
"author" : "Jon Don",
"tags": [{
"id": 10101,
"name": "2.Marketing Sales",
"color": "#f78234"
}, {
"id": 10103,
"name": "4.Automotive",
"color": "#9b7cdb"
}],
"creation-date": 20160101
}, {
"id": 3511478,
"company-name": "company1",
"author" : "Peter Jon Doe",
"tags": [{
"id": 10101,
"name": "2.Marketing Sales",
"color": "#f78234"
}, {
"id": 9706,
"name": "3.sales",
"color": "#37ced0"
}, {
"id": 9562,
"name": "3.IT",
"color": "#37ced0"
}],
"creation-date": 20160101
}]
and I use alasql with xlsx.core libraries to export this to excel file.
For first I remove STATUS from original json (provided by teamwork API) and then I change JSON to javascript array
$.ajax({
type: "GET",
url: requrl,
headers: {"Authorization": "BASIC " + window.btoa(key + ":xxx")},
success: function(data) {
delete data.STATUS;
//alert(data);
//console.log(data);
var arr = $.map(data, function(el) { return el });
//console.log(arr);
alasql("SELECT * INTO XLSX('test.xlsx',{headers:true}) FROM ? ",[arr]);
},
error: function(response) {
alert(response);
}
});
this works nice and I can my json extract as excel file
but I have issues with tags objects in this json..when I change it to array and then save it in excel, all columns are ok except tags, where I see just [object][object]
Could you help me how to get these tags also into correct array? The best would be one tag = one column in excel
edit:
this is desired output - max # of tags in JSON will define number of columns tags (doesnt matter if it is tags tags tags or tags tags2 tags3)

calling data from nested .json using ajax

I'm new one to work with JSON and getting stuck that how to call JSON data from nested .json file. please check the code below ...
JSON FORMAT
{
"hotels": {
"category": [{
"name": "Exotic and Luxurious",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
},{
"name": "In the Tourist Hub",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
},{
"name": "Close to the Beach and Market",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
},{
"name": "Private and Peaceful",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
}]
}
}
AJAX CODE
jQuery(document).ready(function() {
jQuery.ajax({
url: 'hotels.json',
type: 'GET',
dataType: 'json',
success : function(data){
/*jQuery(data).each(function(index, value){
console.log(value.hotels.name);
})*/
//console.log(data.hotels.category[1].name);
//alert(JSON.stringify(data));
var i = 0;
jQuery(data.hotels.category).each(function(){
jQuery('.theme ul').append('<li data-role="'+data.hotels.category[i].name+'">'+data.hotels.category[i].name+'</li>');
i++;
})
jQuery(data.hotels.category).each(function(){
jQuery('.budget ul').append('<li data-role="'+data.hotels.category[i].name.products[0].name+'">'+data.hotels.category[i].name.products[0].name+'</li>');
i++;
})
}
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
HTML
<div class="theme">
<p>Hotel experience theme</p>
<ul>
</ul>
</div>
<div class="budget">
<p>Budget</p>
<ul>
</ul>
</div>
I want to call name data from products which is defined in category in <li> of budget div

Change:
jQuery(data.hotels.category).each(function() {...});
to:
jQuery.each(data.hotels.category, function() {...});
The first form is for looping over DOM elements in a selection, the second form is for looping over Javascript arrays and objects.
And within the function, you can use this to refer to the element, you don't need to use data.hotels.category[i].
But if you continue to use data.hotels.category[i], you need to set i back to 0 before the second loop. Or you could just do everything in one loop. And .each() passes the array index to the function, so you don't need your own variable.
Finally, products is not a sub-property of the name property.
The final result of fixing and simplifying this should be:
jQuery.each(data.hotels.category, function(){
jQuery('.theme ul').append('<li data-role="'+this.name+'">'+this.name+'</li>');
jQuery('.budget ul').append('<li data-role="'+this.products[0].name+'">'+this.products[0].name+'</li>');
});

The products belong to category directly so you don't have to pass by name to get it, you should go directly to it, so try to replace :
data.hotels.category[i].name.products[0].name
BY :
data.hotels.category[i].products[0].name
Hope this helps.

Json array into select box with php

I hope someone can help me with this issue I have. What I want is a select box, which is getting filled from a json file. The problem is I have a strange kind of json file which I dont know if its array or object.
Here is how it loosk like:
{
"Id": 4,
"Name": "Testing Demo",
"OpeningHours": [
{
"Name": "Monday",
"Hours": "Kl. 09:30:00 - 21:00:00"
}
],
"Address": {
"Street": "Johnson road",
"StreetNumber": "5",
"Town": "London"
},
"Phone1": "4123213414",
"Phone2": null,
"Documents": null,
"Messages": [
{
"Title": "We are on the way",
"Body": "fine",
"Created": "01-02-2014"
},
{
"Title": "Get the stuff",
"Body": "To be ready",
"Created": "01-01-2014"
}
],
"Employees": [
{
"Name": "John Hood",
"Description": "officer",
"ProfileImageUrl": "http://grfx.cstv.com/photos/schools/kty/sports/m-baskbl/auto_headshot/9265204.jpeg"
},
{
"Name": "John hood 2",
"Description": "athletic",
"ProfileImageUrl": "http://grfx.cstv.com/photos/schools/kty/sports/m-baskbl/auto_headshot/9265204.jpeg"
}
]
}
How Iam going to show values of ID and the name?
This code it doesnt work which I dont know if Iam doing it even correctly..
(function($) {
$(document).ready(function() {
$('<tr class="form-field form-required"></tr>').append(
$('<th scope="row">New field</th>')
).append(
$('<td></td>').append(
$('<select id="release-list"></select>')
).append(
$('<p>Explanation about your new field</p>')
)
).insertAfter('#wpbody-content table tr:eq(2)');
});
$.getJSON('../../cache/path.json', function(data) {
var select = $('#release-list');
$.each(data, function(key, val){
$('<option/>').attr('value', val[key]["Id"]).html('value' + val[key]["Name"]).appendTo(select);
});
});
})(jQuery);

you can convert the data from json to array using JSON.parse()
http://www.dyn-web.com/tutorials/php-js/json/parse.php
Example:
var data = '{"first":[1,2,3],"second":[4,5,6]}';
var jsonData = JSON.parse(data);
alert(jsonData.first[1]);
alert(jsonData.second);

parse facebook json javascript

I am using javascript api to get facebook comments.
i am getting the following json result , but how can i parse them to use on my page ?
{
"id": "1234567891_2823098717038_3160191",
"from": {
"name": "User",
"id": "1234567891"
},
"message": "comment only...",
"can_remove": true,
"created_time": "2012-05-05T07:43:11+0000"
},
{
"id": "1234567891_2823098717038_3160281",
"from": {
"name": "User",
"id": "1234567891"
},
"message": "just another comment...",
"can_remove": true,
"created_time": "2012-05-05T08:14:17+0000"
},
{
"id": "1234567891_2823098717038_3160336",
"from": {
"name": "user2",
"id": "56265654845454"
},
"message": "congratz dear :)",
"can_remove": true,
"created_time": "2012-05-05T08:29:05+0000"
}
],
"paging": {
"next": "http://link.dddd"
}
}
How can i loop through this and display the contents ?
jQuery solution is acceptable.
Thank you.

Use JQuery.parseJSON: http://api.jquery.com/jQuery.parseJSON/

assoc_data = jQuery.param(response); //where response is your json
$.ajax({
type: "POST",
url: "submit_fb_data.php",
data: assoc_data,
success: function(data) {
//etc
}
});
make sure you use a >=1.4 jquery version