We Keep Coding

Iterating over the data received from ajax / json

Below is the type of data I am getting via ajax.
[{"model": "blogapp.articles", "pk": 1, "fields": {"title": "Rainbow Buildings in Tokyo", "slug": "Rainbow-Buildings-in-Tokyo"}}, {"model": "blogapp.articles", "pk": 2, "fields": {"title": "4 Cool Cube Facades", "slug": "4-Cool-Cube-Facades"}}]
How can I iterate over this data using .each to get the title and the slug for each entry?
The below code gives me a syntax error on the data.
app.js
$(document).ready(function () {
$(".tag-nav-links").on("click", function (e) {
e.stopPropagation();
return $.ajax({
type: "POST",
url: "",
dataType: "json",
data: { filter: `${e.target.textContent}` },
success: function (data) {
var html = "";
$(data).each(function (index, value) {
html += "<h4>{{" + value.title + "}}</h4>";
});
$("trial").append(html);
},
});
});
});

The jQuery function (which you're using like this: $(data)) isn't what you want there. (You may have meant $.each(data, ...), but these days there's no need.) If data really is an array as shown, just use map on it, then join the result together with a blank string:
success: function (data) {
$("trial").append(data.map(value => {
return "<h4>{{" + value.fields.title + "]]</h4>";
}).join(""));
},
If data is really as shown in the screenshot, then it's an object with a data property containing a string of JSON. That's probably a misconfiguration or coding error on the server, current it's returning text something like this:
{"data":"[{\"model\": \"blogapp.articles\", \"pk\": 1,...
when it should be returning something like this:
{"data":[{"model":"blogapp.articles","pk":1,...
Something is pre-stringifying the data before passing it to whatever wraps it in the {"data": ___} wrapper, stringifies it, and returns it.
Until/unless you fix it, you'll have to parse it twice. jQuery is doing one of those for you, but you'll have to do the second one, after which you should be able to use the array:
// Until/unless the server is fixed
success: function (data) {
data = JSON.parse(data.data); // *** Second parse
$("trial").append(data.map(value => {
return "<h4>{{" + value.fields.title + "]]</h4>";
}).join(""));
},
If you fix the server so it's not double-stringifying, you'd use data.data instead (since data is your parameter name, and it refers to an object with a data property that has the array you want to use):
// After the server is fixed
success: function (data) {
$("trial").append(data.data.map(value => {
// ^^^^^^^^^
return "<h4>{{" + value.fields.title + "]]</h4>";
}).join(""));
},

Laravel ajax response get values

I have ajax like this:
$(".cq").on("input", function() {
$.ajax({
url: "create/reefFormAjax",
type: "POST",
data: $(this.form).serialize(),
success: function(data) {
callback(data);
}
});
});
function callback(response) {
$(".sum_whl").val(response);
$(".sum_rtl").val(response);
}
So in my controller I have something like this:
$test = $request->all();
return json_encode($test);
Then I retrieve data back to my view:
{
"material": "0",
"mquantity": null,
"cq": "2",
"sum_rtl": null,
"sum_whl": null
}
The question is how I can get each value from response ?
I tried $(response).find('cq').val() or filter but I an have error.
Any ideas?

The result you get is a JSON response
var response =
{
"material": "0",
"mquantity": null,
"cq": "2",
"sum_rtl": null,
"sum_whl": null
};
If the JSON is in your response variable, you can simply access the element like this
response.material; // should print 0
response.cq; // will print 2

When you return a json(or array) from laravel it automatically turn into a js object. so you can access like this:
function callback(response) {
$(".sum_whl").val(response.sum_whl);
$(".sum_rtl").val(response.sum_rtl);
}

console.log(response.data[0]) or console.log(reponse.material) must be work. Because its json object.
Give it a try.
$("#div).html(response.data[0])
$("#div).html(response.material)

I solved this problem, i was using return json_encode instead of return response->json($var); So i grab my values!

data.forEach is not a function

This is my json
[
"59191", "TypeAV - Canada", "Available",
"422129", "TypeAA - Italy", "Available",
"959191", "TypeBB - USA", "N/A",
"6D968C", "TypeAV - Canada", "Available"
]
and js
$.ajax({url: 'test.json'}).done(function(data) {
$.each(myArr, function () {
data.forEach(function (line) {
//do something
});
})
})
I get a Uncaught TypeError: data.forEach is not a function. How to fix this?

data is apparently not an array. $.ajax will automatically parse the response as JSON if the server sends the Content-type: application/json, but it must not be doing this. Since jQuery doesn't know that the response should be parsed as JSON, it simply passes the string response to the callback function.
So you need to tell JQuery that it's JSON and needs to be parsed. The easiest way is to use $.getJSON instead of $.ajax, since you're not passing any of the complex options to $.ajax.
$.getJSON('test.json', function(data) {
...
});
You can also use the dataType: option to `$.ajax.
$.ajax({
url: "test.json",
dataType: "json"
}, function(data) {
...
});

Results From A JSON Call to Variable

I am trying to get a ID from a JSON call, and not sure what the issue is. I have a Callback function set up to set a global variable as such.
GOAL: Make a call to a DB, get the ID from the results returning.
STEP 1 - Make call to JSON and Parse Results
callAjaxGet(<set url>,function(myReturn){
var noteID = ''
$.each(myReturn.results, function(i, note){
noteID = JSON.parse(note.id);
});
})
STEP 2 - JSON/Callback Function
function callAjaxGet(url, callBack){
$.ajax({
url: url,
type: 'GET',
timeout: 10000,
success: function(data,textStatus,xhr){
return callBack(xhr);
},
error: function(xhr, status, error){
console.log(xhr.responseText);
}
});
}
STEP 3 - The Returning JSON
{
"next": "http://selleck.beta.org/playlist/notes/?limit=20&offset=20&play=437",
"previous": null,
"results": [
{
"id": 258,
"url": "/playlist/notes/258/",
"content": "testing",
"play": 437
}
]
}
No matter what I'm doing, the noteID comes back without value. I've looked in Google Development Tools, XHR, and can see the JSON coming back, so thinking I've misunderstood something.
Thank you for any thoughts and suggestions
Steve

Figured it out. Two things were wrong.
Was using XHR instead of Data
Wasn't parsing the JSON properly, the ID is in an array, so had to set the first entry, so
noteID = myReturn.results[0].id;
Thanks A.Sharma and ron tornambe for the pointer on the XHR error
Steve

Scraping JSON data from an AJAX request

I have a PHP function that echoes out JSON data and pagination links. The data looks exactly like this.
[{"name":"John Doe","favourite":"cupcakes"},{"name":"Jane Citizen","favourite":"Baked beans"}]
Previous
Next
To get these data, I would use jQuery.ajax() function. My code are as follow:-
function loadData(page){
$.ajax
({
type: "POST",
url: "http://sandbox.dev/favourite/test",
data: "page="+page,
success: function(msg)
{
$("#area").ajaxComplete(function(event, request, settings)
{
$("#area").html(msg);
});
}
});
}
Using jQuery, is there anyway I can scrape the data returned from the AJAX request and use the JSON data? Or is there a better way of doing this? I'm just experimenting and would like to paginate JSON data.

It's better to not invent your own formats (like adding HTML links after JSON) for such things. JSON is already capable of holding any structure you need. For example you may use the following form:
{
"data": [
{"name": "John Doe", "favourite": "cupcakes"},
{"name": "Jane Citizen", "favourite": "Baked beans"}
],
"pagination": {
"prev": "previous page URL",
"next": "next page URL"
}
}
On client-side it can be parsed very easily:
$.ajax({
url: "URL",
dataType:'json',
success: function(resp) {
// use resp.data and resp.pagination here
}
});

Instead of scraping the JSON data i'd suggest you to return pure JSON data. As per your use case I don't think its necessary to write the Previous and Next. I am guessing that the first object in your return url is for Previous and the next one is for Next. Simply return the below string...
[{"name":"John Doe","favourite":"cupcakes"},{"name":"Jane Citizen","favourite":"Baked beans"}]
and read it as under.
function loadData(page){
$.ajax
({
type: "POST",
url: "http://sandbox.dev/favourite/test",
dataType:'json',
success: function(msg)
{
var previous = msg[0]; //This will give u your previous object and
var next = msg[1]; //this will give you your next object
//You can use prev and next here.
//$("#area").ajaxComplete(function(event, request, settings)
//{
// $("#area").html(msg);
//});
}
});
}
This way return only that data that's going to change not the entire html.

put a dataType to your ajax request to receive a json object or you will receive a string.
if you put "previous" and "next" in your json..that will be invalid.
function loadData(page){
$.ajax({
type: "POST",
url: "http://sandbox.dev/favourite/test",
data: {'page':page},
dataType:'json',
success: function(msg){
if(typeof (msg) == 'object'){
// do something...
}else{
alert('invalid json');
}
},
complete:function(){
//do something
}
});
}
and .. in your php file, put a header
header("Content-type:application/json");
// print your json..
To see your json object... use console.log , like this:
// your ajax....
success:(msg){
if( window.console ) console.dir( typeof(msg), msg);
}
Change your json to something like this: (Use jsonlint to validate it - http://jsonlint.com/)
{
"paginate": {
"previous": "http...previsouslink",
"next": "http...nextlink"
},
"data": [
{
"name": "JohnDoe",
"favourite": "cupcakes"
},
{
"name": "JaneCitizen",
"favourite": "Bakedbeans"
}
]
}

You can try this :-
var jsObject = JSON.parse(your_data);
data = JSON.parse(gvalues);
var result = data.key;
var result1 = data.values[0];