We Keep Coding

Issues parsing JSON with JQuery/Ajax

I'm accessing an API through JQuery/JSON. I can get the entire JSON block to display on a page using the following:
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
contentType: 'application/json',
headers: {'Access-Control-Allow-Origin': '*'},
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('un:pw'));
},
error: function(jqXHR, textStatus, data){
console.log("(1)Static error message");
console.log("(2)Output of textStatus " + textStatus);
console.log("(3)Output of data " + data);
},
success: function(data) {
var myData = data;
$('#myData').html('<p>'+ myData +'<p>')
}
})
However, when I try to access a key/value from that JSON, I get undefined. I think I'm not parsing the JSON correctly. Here's an example of some code I tried inside the success function:
$.each(myData.blockOne, function(data){
$('#myData').html('<p>'+ this.blockOne.id +'<p>')
});
Here's is an example of the JSON:
[
{
"ItemName": {
"id": "XYZ",
"caseNumber": "123"
},
"blockOne": [
{
"id": "ABC",
"subject": "321",
}
],
"blockTwo": [
{
"id": "EFG",
"subject": "456",
}
]
},
{
"ItemName": {
"id": "HIJ",
"caseNumber": "333"
},
"blockOne": [
{
"id": "JIL",
"subject": "999",
}
],
"blockTwo": [
{
"id": "OPE",
"subject": "778",
}
]
},
]
I'm trying to output something like the following:
Item
ID: XYZ
Case: 123
Block 1:
ID: ABC
Subject: 321
Block 2:
ID: EFG
Subject: 456
Item
ID: HIJ
Case: 333
Block 1:
ID: JIL
Subject: 999
Block 2:
ID: OPE
Subject: 778
Any help is greatly appreciated.

Inside $.each(), you need to loop through myData array instead of myData.blockOne because myData.blockOne returns only the data of the blockOne object.
var myData = [{
"ItemName": {
"id": "XYZ",
"caseNumber": "123"
},
"blockOne": [{
"id": "ABC",
"subject": "321",
}],
"blockTwo": [{
"id": "EFG",
"subject": "456",
}]
},
{
"ItemName": {
"id": "HIJ",
"caseNumber": "333"
},
"blockOne": [{
"id": "JIL",
"subject": "999",
}],
"blockTwo": [{
"id": "OPE",
"subject": "778",
}]
},
];
var html = "";
$.each(myData, function() {
html += `
<p>Item</p>
<p>ID :${this.ItemName.id}</p>
<p>Case :+${this.ItemName.caseNumber}</p>
<p>Block 1:</p>
<ul>
<li>ID :${this.blockOne[0].id}</li>
<li>Subject :${this.blockOne[0].subject}</li>
</ul>
<p>Block 2:</p>
<ul>
<li>ID :${this.blockTwo[0].id}</li>
<li>Subject :${this.blockTwo[0].subject}</li>
</ul>
`
});
$('#myData').html(html)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myData"></div>

select2 I don't want to get data out of json

My script won't load any data in the Select2. I made data from laravel controller with response JSON data, this result json
"results": [
{
"id": 1,
"code": "11",
"name": "jackson",
},
{
"id": 2,
"code": "12",
"name": "michael,
},
this my script code
$('.name_user').select2({
width: "100%",
placeholder: "Search...",
ajax: {
url: "{{route('name_user')}}",
processResults: function(data) {
return {
results: $.map(data, function(obj) {
return {
id: obj.id,
name: obj.name
};
})
};
},
cache: true
}
});
How do I get data from route name_user?

How to load json foriegn key data to jquery datatable

This is how my JSON data is getting using the url.
[
{
"id": 1,
"fullName": "Menushi",
"email": "menushi#gmail.com",
"contact": "04567383",
"department": {
"id": 1,
"departmentName": "Computing and Information System(CIS)",
"description": "This department is regarding computer science ",
"active": true
},
"imageUrl": "LCR438D8E9C68",
"active": true,
"file": null,
"address": "Polonnaruwa"
},
I want to display the department name in the Jsondata table.Below shows the part of the javascript file.Department object is in onetoone relationship.I want to display department object data also in the table.
$table.DataTable({
pageLength: 5,
lengthMenu: [[3, 5, 10, -1], ["3 Records", "5 Records", "10 Records", "All"]],
ajax: {
url: jsonUrl,
dataSrc: ''
},
columns: [
{
data : 'imageUrl',
mRender : function(data,type,row){
return '<img src="'+window.root+'/resources/images/'+data+'.jpg" class="dataTableImg">';
}
},
{
data: 'fullName'
},
{
data: 'address'
},
{
data: 'email'
},
{
data: 'department.departmentName',
},
{
data: 'contact'
}
I have used the above way to display the department name in my javascript file..But it display nothing.How I can over come this issue?

How do I map an array of objects

I can't figure this out and I've been at it for hours, so let's say I have an array of JSON. I want to map out the data into a new array.But I am stuck, could someone explain how to use map properly with an array of Json objects, thanks.
var results = [{
"userid": 1213,
"name": "jake",
"id": 3242,
"state": "ny"
}, {
"userid": 1203,
"name": "phil",
"id": 3142,
"state": "ny"
}, {
"userid": 1013,
"name": "kate",
"id": 3241,
"state": "js"
}];
$.ajax({
dataType: "json",
data: results,
success:function(data){
$.map(data.results, (dat, item) {
var array = new Array();
var groups;
groups = array;
groups.a = dat.userid;
groups.b = dat.name;
groups.c = dat.state;
array.push(groups);
} })
});

Map your array before calling $.ajax();
results = results.map(function(item) {
return {
a: item.userid,
b: item.name,
c: item.state;
};
});
//DO your thing
$.ajax({
dataType: "json",
data: results
});

You just forget return mapped obj.
var results = [{
"userid": 1213,
"name": "jake",
"id": 3242,
"state": "ny"
}, {
"userid": 1203,
"name": "phil",
"id": 3142,
"state": "ny"
}, {
"userid": 1013,
"name": "kate",
"id": 3241,
"state": "js"
}];
console.log($.map(results, function(dat, item) {
var groups = {};
groups.a = dat.userid;
groups.b = dat.name;
groups.c = dat.state;
return groups;
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

First thing, you need to put your mapping code inside an ajax callback. Then, you can use either jQuery map or javascript map or simple for loop to iterate through each item in the response array.
$.ajax({
dataType: "json",
data: results,
success: function( data )
{
var groups = data.map(function(currentItem){
var group = {};
group.a = currentItem.userid;
group.b = currentItem.name;
group.c = currentItem.state;
return group;
});
console.log( groups );
}
});

jQuery UI autocomplete is not working

This is my JavaScript code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("input#suggestZams").autocomplete({
source: "content/prevadzky/zam/zam_json2.php?letter=all",
minLength: 1,
delay: 0,
select: function(event, ui) {
alert(1);
}
});
});
//]]>
</script>
This is my HTML:
<input id="suggestZams" class="input" size="10" />
The URL zam_json2.php?letter=all returns this json:
[
{ "id": "31440", "value": "Andrej\u010d\u00e1k, Ing." },
{ "id": "31690", "value": "Alexovi\u010d , Ing." },
{ "id": "31796", "value": "Antoni\u010d , Ing." },
{ "id": "31989", "value": "Antolik , Ing." },
{ "id": "32010", "value": "Ambrozov\u00e1 RNDr., PhD." },
{ "id": "32014", "value": "Aksam\u00edt" },
{ "id": "32024", "value": "Angelovi\u010d" },
{ "id": "32102", "value": "Andrej\u010d\u00e1k" },
{ "id": "32168", "value": "Avukov\u00e1 , Ing." },
{ "id": "32177", "value": "Andr\u00e1\u0161" },
{ "id": "32181", "value": "Andrej\u010d\u00e1kov\u00e1 , Mgr." },
{ "id": "32403", "value": "Arend\u00e1\u0161 , Bc." },
{ "id": "47379", "value": "An\u010fal" },
{ "id": "47399", "value": "Adam\u00edk , Ing." },
{ "id": "50022", "value": "Abo\u0161i" },
{ "id": "50085", "value": "Armer\u00eda Olmedo , Ing." },
{ "id": "53468", "value": "Anto\u0161" },
{ "id": "54837", "value": "Adamec , Ing." },
{ "id": "56659", "value": "Apostolou" },
{ "id": "57820", "value": "Alez\u00e1r" },
{ "id": "58576", "value": "Andrej\u010d\u00e1k , Bc." },
{ "id": "58587", "value": "Aronov\u00e1 , Ing." },
{ "id": "58595", "value": "Abaffy , Bc." },
{ "id": "58607", "value": "Adamec , Bc." },
{ "id": "58643", "value": "Antu\u0161 , Ing." },
{ "id": "62277", "value": "Adam\u010d\u00e1k , Mgr." },
{ "id": "62379", "value": "Andruch" },
{ "id": "63415", "value": "Adamkovi\u010d , Ing." }
]

Quote:
Autocomplete can be customized to work
with various data sources, by just
specifying the source option. A data
source can be:
an Array with local data
a String, specifying a URL
a Callback
When a String is used, the
Autocomplete plugin expects that
string to point to a URL resource that
will return JSON data. It can be on
the same host or on a different one
(must provide JSONP). The request
parameter "term" gets added to that
URL. The data itself can be in the
same format as the local data
described above.
What you are doing looks odd to me. I think that you will actually need to edit the server side script so that it expects the query string variable term instead of letter and returns an array of strings or an array of {label, value} objects instead of {value, id}.
If the URL content/prevadzky/zam/zam_json2.php?letter=all is provides the "complete" list of words at once, you can do something along these lines:
$.getJSON("content/prevadzky/zam/zam_json2.php?letter=all", function(data) {
var datacopy = $.map(data, function(item) {
return {
label: item.value,
value: item.id
};
});
$("input#suggestZams").autocomplete({
source: datacopy,
minLength: 1,
delay: 0,
select: function(event, ui) {
alert(typeof ui);
}
});
});

If you want to get the data from a url you have to define a function for source:
source: function( request, response ) {
$.ajax({url: "content/prevadzky/zam/zam_json2.php?letter=all",
dataType: "json",
...
});
},
...
EDIT:
In the docs it says: source can be a URL. In this case, try to change the JSON response to have 'label' instead of 'id' in the returned objects.

Here an Script that work for me in jQuery 1.5.1.
source: function( request, response ) {
$.ajax({
url: "...",
dataType: "json",
...
success: function( data ) {
# data = json response
}
});
}