We Keep Coding

json_encode() Data Being Automatically Converted Into A Javascript Object Without JSON.parse() Being Used

I have some PHP and JavaScript that works by PHP updating a MySQL database, and then outputting the updated code back onto the page without a hard refresh using the JavaScript fetch() method. This code works, but there is a part I don't understand — why is it when the json_encode() PHP method is used, which converts the data to a JSON string, when it is then used in the JavaScript it is automatically being converted into a JavaScript object without JSON.parse() being used?
In the Javascript when I use JSON.parse() it understandly throws an error, because the data isn't a string (which initially caused some confusion), when I console log the json variable being used in the JavaScript it does indeed return a JavaScript object where I can access its properties and methods etc.
There is no other JSON or json_encode() being used on the page (or indeed the site).
Also in the PHP script it echoes the JSON with echo json_encode($board_row); when the data is fetched from the database, before any HTML content is outputted. When I try and echo this in the HTML to see the value of json_encode($board_row); it just outputs the word false. I don't understand what is going on there either?
If I manually add a simply array into the HTML such as $arr = array('a' => 1, 'b' => "hello", 'c' => null); and then echo that in the HTML with echo json_encode($arr); as excepted it outputs a JSON string.
If someone could kindly explain why this is happening, that would be wonderful.
PHP
if (isset($_POST['submit-board-name'])) {
$create_board_name = $_POST['create-board-name'];
try {
// insert into database
$createBoardSQL = "
INSERT INTO boards (board_name, user_id)
VALUES (:board_name, :user_id )
";
$bstmt = $connection->prepare($createBoardSQL);
$bstmt->execute([
':board_name' => $create_board_name,
':user_id' => $db_id
]);
// ----- fetch as JSON
if(isset($_POST['json_response'])) {
$board_stmt = $connection->prepare("
SELECT * FROM `boards` WHERE `user_id` = :user_id
AND `board_name` = :board_name
ORDER BY `board_id` DESC");
$board_stmt -> execute([
':user_id' => $db_id,
':board_name' => $create_board_name
]);
$board_row = $board_stmt->fetch();
header('Content-type: application/json');
echo json_encode($board_row);
exit;
}
} catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
}
JavaScript
let boardModuleForm = document.querySelector('.board-module-form');
// URL details
let myURL = new URL(window.location.href),
pagePath = myURL.pathname;
if (boardModuleForm) {
boardModuleForm.addEventListener('submit', function (e) {
if (e.submitter && e.submitter.classList.contains('js-fetch-button')) {
e.preventDefault();
var formData = new FormData(this);
formData.set(e.submitter.name, e.submitter.value);
formData.set('json_response', 'yes');
fetch (pagePath, {
method: 'post',
body: formData
})
.then(function(response) {
if (response.status === 200) {
response.json().then(function(json){
const newBoardName = json.board_name,
boardId = json.board_id;
const newButton = `
<button name="board-name" type="submit">
<span>${newBoardName}</span>
<span style="margin:0" class="add-icon flex">+</span>
</button>
<input class="board-id-value" type="hidden" value="${boardId}">
`
// add new button from above onto page
document.querySelector('.board-list').insertAdjacentHTML('afterbegin', newButton);
});
}
})
.catch(function(error) {
console.error(error);
})
}
})
}

In the handler for your fetch response, you call response.json().then(...). This is already doing the JSON parsing for you without needing to call JSON.parse manually.

GUID model binding in ASP.NET MVC

I was hoping someone could help me sort this out.
The solution to this is probably obvious but I can't seem to figure out what I'm missing...
I'm trying to issue a get request from my Javascript code, and the URL contains a Guid.
The ASP.NET controller does not get hit/register the request to the API.
I've tried a couple different things already but this is my Javascript and Controller as is:
function getChat( contact_id ) {
$.get("/contact/conversations", { contactId: contact_id })
.done( function(resp) {
let chat_data = resp.data || [];
loadChat( chat_data );
});
}
and...
[Route("contact/conversations")]
public JsonResult ConversationWithContact(Guid? contactId)
{
... //this doesn't get hit
}
I keep getting this error:
I'm not sure how to properly bind the Guid such that it is received by the ASP.NET Controller.
Any ideas?? Much appreciated and have a great day!

Change your route to this:
[Route("~/contact/conversations/{id}")]
public JsonResult ConversationWithContact(string id)
{
if(!string.IsNullOrEmpty(id)){
var contactId= new Guid (id);
... //this doesn't get hit
}
}
and your ajax:
function getChat( contact_id ) {
$.get("/contact/conversations/"+contact_id)
.done( function(resp) {
let chat_data = resp.data || [];
loadChat( chat_data );
});
}
but if you use very old MVC and attribute routing doesnt work for you, try this:
function getChat( contact_id ) {
$.get("/contact/ConversationWithContact/"+contact_id)
.done( function(resp) {
let chat_data = resp.data || [];
loadChat( chat_data );
});
}

CakePHP 4.x Ajax request with CSV-file

I am developing a responsive user interface in CakePHP 4.x which occasionally uses Ajax requests.
My Ajax requests are performing just fine but I am having a lot of trouble incorporating a CSV-file in the request so my controller can handle the data. What I want to accomplish is that that I can choose a CSV-file, press submit and that the Ajax-request sends the file to the controller and uses the independent rows to update the database.
My code:
Javscript:
function importProducts() {
/* Getting form data */
let form = document.getElementById('importProductsForm');
let formData = new FormData();
let file = $(form.products_file).prop('files')[0];
formData.append("csv_file", file);
/* Moving product stock */
ajaxRequest('Products', 'importProducts', formData, processImportProducts);
}
function ajaxRequest(controller, action, data = null, callback = null) {
$.ajax({
url : "<?=$this->Url->build(['controller' => '']);?>" + "/" + controller + "/" + action,
type : 'POST',
data : {
'data': data
},
dataType :'json',
/*processData: false,*/
/*contentType: false,*/
success : function(dataArray) {
let response = dataArray.response;
if (typeof response.data !== 'undefined') {
data = response.data;
if (callback != null) {
callback(data);
}
} else if (response.success == 0) {
data = null;
giveError(response.errorTemplate);
} else {
data = null;
if (callback != null) {
callback(data);
}
}
},
error : function(request,error)
{
console.error(error);
}
});
}
At the moment the controller function does not do anything special but receiving and setting the data:
public function importProducts() {
$this->RequestHandler->renderAs($this, 'json');
$response = [];
if($this->request->is('post')) {
$data = $this->request->getData();
$response['test'] = $data;
} else {
$response['success'] = 0;
}
$this->set(compact('response'));
$this->viewBuilder()->setOption('serialize', true);
$this->RequestHandler->renderAs($this, 'json');
}
After some research I discovered I could use the FormData object to send the file. The error I then received was 'illegal invocation'. After some more research I discovered this had to with automatic string parsing by Ajax. According to some other StackOverflow posts I could resolve this by setting the processdata and contenttype properties to false. This fixed the problem but resulted in an Ajax request which always would be empty (that does not contain any data). I tested this without the CSV-file with a regular data object that contains a variable with a string but also resulted in a empty request (no data send to controller).
So my problem is that without the processdata property as false I get the 'illegal invocation' error, otherwise with processdata as false I literary do not receive any data in my controller. I am looking for solution to resolve this problem so I can send my CSV-file or at least the data within the file to my controller.
Other solutions than using the FormData are also welcome, for example I tried to read the CSV-file in Javascript and turn this into another object (with the jquery csv api) to send to the controller, sadly without success until now.

AngularJS - Looping through ASYNC GET requests

I am a beginner in Javascript and AngularJS and am trying to do the below:
There is a service that takes a list as URLs as input and find their respective data in a local cache/repository custom service.
If all are found, they are returned.
If some are missing, the missing ones are fetched by making ASYNC calls to the API. They are also stored into the repository for future availability.
All received data are concatenated into a local "data" variable and sent as a single array of objects to the controller.
It is looping through each URL using $.map to fetch data and concat it to the local "data" variable. Once the loop is complete, it is returning the "data" variable.
I am aware that this is not going to work and also the reason for it. But, am not able to figure out how to achieve this using an ASYNC design pattern.
myService.factory("dataManagerService",["dataRepositoryService","dataFetchService",
function(dataRepositoryService,dataFetchService)
{
var methodObj = {};
methodObj.getObjData = function(urlList)
{
//URLs are used to fetch data from API and also to uniquely identify the fetched data.
//urlList is a list/array of URLs for which data is required.
//Get all objects from data repository which are specified in the URL list.
var data = dataRepositoryService.getData(urlList);
//If repository did not have all objects specified from the URL list, fetch the missed objects.
if (data.length < urlList.length)
{
//Get list of URL for which data was received from repository.
var excludeURLList = $.map(data,
function(obj)
{
return obj.url;
}
);
//Get list of all URLs from urlList that are missing from excludeURLList
var fetchUrlList = $.grep(urlList,
function(url)
{
return excludeURLList.indexOf(url) < 0;
}
);
//Loop through all URLs in fetchUrlList (for which data was not found in the repository)
$.map(fetchUrlList,
function(url)
{
//Make a GET request to the API
dataFetchService.fetchData(url)
.then(
function(response)
{
//Add the received response to the repository, so that its available the next time.
dataRepositoryService.setData(response.data);
//Append missing data to "data" variable
data.concat(response.data);
}
);
}
);
}
return data; /* This will be incomplete since it will be returned before all the async calls have been completed. */
}
return methodObj;
}
]);

You're going to want to use $q.all() to retrieve all of the URLS. Here's a pretty good article on this: https://www.martin-brennan.com/using-q-all-to-resolve-multiple-promises/
You're going to want to do something like this:
getObjectList(urlList) {
var promises =[]
urlList.map( function(url) { promise.push(getUrl(url) } )
$q.all(promises).then( function(responses) { assemble what you want to return here}
)
}
function getUrl(url) {
var q=$q.defer()
if (whereever you've stored the data has fetched the url already) {
return $q.when(the data)
} else {
return $http.get(url).then( function(response) {
return $q.resolve(response.data)
}, function (error) { return $q.reject(error) })
}
}

Can't connect to web service by JQuery

I use jquery (ajax) to connect to a web service which returns string , it is not working with me. it always go to error function. here is my web service :
[HttpGet]
[ActionName("GetImage")]
public string GetImage(string base64String, string imgName,string reqTitle , string reqSubject, string reqStatus,string Creator , DateTime creationdate )
{
try
{
using (PhMobAppEntities context = new PhMobAppEntities())
{
ClaimsApproval _ca = new ClaimsApproval();
_ca.imageBasestrg = base64String;
_ca.imageName = imgName;
_ca.Creator = Creator;
_ca.CreationTime = creationdate;
_ca.ReqStatus = reqStatus;
_ca.ReqTitle = reqTitle;
_ca.ReqSubject = reqSubject;
context.ClaimsApprovals.Add(_ca);
context.SaveChanges();
return "Success";
}
}
catch (DbEntityValidationException ex)
{
var errorMessages = ex.EntityValidationErrors
.SelectMany(x => x.ValidationErrors)
.Select(x => x.ErrorMessage);
var fullErrorMessage = string.Join("; ", errorMessages);
var exceptionMessage = string.Concat(ex.Message, " The validation errors are: ", fullErrorMessage);
throw new DbEntityValidationException(exceptionMessage, ex.EntityValidationErrors);
}
}
and here is my js code :
$("#sendphoto").click(function () {
var url = "http://41.128.183.109:1212/api/Data/GetImage";
var data = {
imgName: "test"
};
$.ajax({
url: url,
type: 'Get',
data: data,
success: function (data) {
alert("Success");
},
error: function (data) {
alert("Please Check Your Internet Connection");
}
});
});
It is running ok when i tested my web service in advanced rest client ,please advice .

I tried connecting to your web service and I get the following response:
{"$id":"1","Message":"No HTTP resource was found that matches the request URI 'http://41.128.183.109:1212/api/Data/GetImage'."}
I think what you have is an internal problem with your c# code, probably with your routing. Your javascript call is probably working fine, but you are passing only one parameter, "test" while you have many more in your declaration.
What http response code are you getting?