We Keep Coding

Is there any way to save json to a file and read/update the same file using browser javascript?

// LocalStorage is a lowdb adapter for saving to localStorage
const adapter = new LocalStorage('db')
// Create database instance
const db = low(adapter)
// Set default state
db.defaults({ items: [] })
.write()
Now how it can be saved where it's hosted like in './maindb.json'?
Is there anything available like FileSync?
Update
after realising there no way that client can access server filesystem. I probably asked a wrong question. but there is a solution using fetch. so if anyone has ans please put it down I am trying my best.
index.html -> fetch(jsonObj) -> post -> save.php-> creates maindb.json/updates.
index.html -> fetch() -> get -> save.php -> returns from maindb.json.

Controller.php
<?php
class Controller {
private $file = 'data.json',
$jsondata = null,
$tempArray = array(),
$data= array();
public function __construct() {
$this->init();
}
private function init(){
if (!file_exists($this->file)) {
touch($this->file);
$this->read();
}else{
$this->read();
}
}
private function read(){
$this->jsondata = file_get_contents($this->file);
$this->tempArray = $this->jsondata != null ? json_decode($this->jsondata): array();
}
private function write(){
array_push($this->tempArray, $this->data);
$this->jsondata = json_encode($this->tempArray);
file_put_contents($this->file, $this->jsondata);
}
public function push($data){
$this->data = $data;
if($this->data){
$this->write();
return true;
}
}
public function get(){
$this->read();
return json_encode($this->tempArray);
}
}
?>
json.php
<?php
require 'Controller.php';
$db = new Controller;
if($db->push($_POST['data'])){
echo $db->get();
}
?>
javascript
function post(input){
var data = {'data': input}
$.ajax({
type: 'POST',
url: 'json.php',
dataType: 'json',
data: data,
success: function(data) {
console.log(data)
}
});
}

Controller API return to Ajax a response with a status 200 but an empty array

I am totaly stuck with an Ajax request. I m trying to send a response to Ajax with an encoded array to json. Ajax get a status 200 response, but only strings are sent ; not my variables.
I wonder if the probleme is due to the asynchronous... When I test with Postman, i can see the full response but Js give to me : {"recipies":[]}.
Thanks for your help.
Ajax :
searchByIngredients: function () {
console.log('Search for recipies');
var array = [];
var ingredients = $('.span-ingredient');
ingredients.each(function () {
array.push(this.innerHTML);
});
console.log(array);
console.log(Array.isArray(array));
$.ajax(
{
url: Routing.generate('shopping_list_by_ingredients_ajax'),
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(array)
}).done(function (response) {
if (null !== response) {
console.log('ok : ' + JSON.stringify(response));
console.log(typeof(response));
} else {
console.log('Error');
}
}).fail(function (jqXHR, textStatus, error) {
console.log(jqXHR);
console.log(textStatus);
console.log(error);
});
}
};
Controller :
/**
* #Route("/by-ingredient-ajax", name="shopping_list_by_ingredients_ajax", options={"expose"=true}, methods={"GET","POST"})
*
* #return JsonResponse|Response
*/
public function createShopplistByIngredientsAjax(Request $request, RecipeIngredientRepository $recipeIngredientRepository, RecipeRepository $recipeRepository)
{
if ($request->isMethod('POST')) {
$dataIngredients = json_decode($request->getContent());
$dataIngredients = $request->getContent();
// Sorry for this :/
$arrayIngredients = explode(', ', $dataIngredients);
$text = str_replace("'", '', $arrayIngredients);
$text2 = str_replace('[', '', $text);
$text3 = str_replace(']', '', $text2);
$recipiesArray = [];
// Get matching RecipeIngredient
foreach ($text3 as $data) {
/**
* #return RecipeIngredient()
*/
$recipeIngredients = $recipeIngredientRepository->findBy([
'name' => $data,
]);
foreach ($recipeIngredients as $recipeIng) {
$name = $recipeIng->getName();
$recipeNames = $recipeRepository->findRecipeByKeywwords($name);
foreach ($recipeNames as $recipeName) {
/**
* #return Recipe()
*/
$recipies = $recipeRepository->findBy([
'id' => $recipeIng->getRecipe(),
]);
// Built array with names & ids of recipies
foreach ($recipies as $key => $recipe) {
$recipeName = $recipe->getName();
$recipeId = $recipe->getId();
$recipiesArray[] = ['name' => $recipeName];
$recipiesArray[] = ['id' => $recipeId];
}
}
}
}
$response = new Response();
$response->setContent(json_encode([
'recipies' => $recipiesArray,
]));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
return new Response(
'Something wrong...',
Response::HTTP_OK,
['content-type' => 'text/html']
);
Repository :
/**
* #return Recipe[] Returns an array of Recipe objects
*/
public function findRecipeByKeywwords($value)
{
return $this->createQueryBuilder('r')
->andWhere('r.name LIKE :val')
->setParameter('val', '%'.$value.'%')
->orderBy('r.id', 'ASC')
->setMaxResults(10)
->getQuery()
->getArrayResult();
}

composer require jms/serializer-bundle
After you have installed the package, you just need to add the bundle to your AppKernel.php file:
// in AppKernel::registerBundles()
$bundles = array(
// ...
new JMS\SerializerBundle\JMSSerializerBundle(),
// ...
);
The configured serializer is available as jms_serializer service:
$serializer = $container->get('jms_serializer');
$json=$serializer->serialize(['recipies' => $recipiesArray], 'json');
return new JsonResponse($json,200);

Symfony 2.1
$response = new Response(json_encode(array('recipies' => $recipiesArray)));
$response->headers->set('Content-Type', 'application/json');
return $response;
Symfony 2.2 and higher
You have special JsonResponse class, which serialises array to JSON:
use Symfony\Component\HttpFoundation\JsonResponse;
//
//
return new JsonResponse(array('recipies' => $recipiesArray));
https://symfony.com/doc/current/components/http_foundation.html

Reduce choice list in select2 dropdown (when searching)

When I use select2, the list of choice doesn't reduce while searching, which is pretty annoying when I have more than 50 choices..
I use symfony4 framework, with a route providing my tags that are in a DB:
/**
* #Route("/miseenpage/keywords.json", name="keywords", defaults={"_format": "json"})
*/
Then I init my select2 with this code provided by the symfony Tags plugin:
$( document ).ready(function() {
initTags($('input[name$="[tagsText]"]'));
});
// TAGS
function initTags($input) {
if($input.length) {
$input.attr('type', 'hidden').select2({
width: '85%',
tags: true,
tokenSeparators: [","],
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term
};
}
},
multiple: true,
ajax: {
url: $input.data('ajax'),
dataType: "json",
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
},
initSelection: function (element, callback) {
var data = [];
function splitVal(string, separator) {
var val, i, l;
if (string === null || string.length < 1) {
return [];
}
val = string.split(separator);
for (i = 0, l = val.length; i < l; i = i + 1) {
val[i] = $.trim(val[i]);
}
return val;
}
$(splitVal(element.val(), ",")).each(function () {
data.push({
id: this,
text: this
});
});
callback(data);
}
});
}
}
Here is the result in my webpage before searching:
Here is after searching:
As you can see, the list is still the same, just the result is underlined. I'd like to filter the result depending on what I search, so I don't have to scroll all the way until I find my underlined term.
As it is the basic working of Select2, I guess there is an configuration problem in my JS.

I instanciated this value on load:
let currentSearch = false;
Then I changed the "AJAX" section of my JS so it loops around the list with the searched value:
ajax: {
url: $input.data('ajax'),
dataType: "json",
data: function (term) {
currentSearch = term;
return {
q: term
};
},
results: function (data) {
let returnTab = [];
data.forEach(function(e) {
if(e.text.includes(currentSearch)){
returnTab.push(e);
}
});
return {
results: returnTab
};
}
},
I'm pretty sure there is a cleaner/simpler way of doing this, but for moment it's a quickfix.

Just a basic example with some code to show how we use Select2 (v4.0.3, 3.5 may be quite different) with Ajax
On a twig, we have for example :
$("#users").css('width', '100%').select2({
minimumInputLength: 3,
ajax: {
url: "{{ path('api_search_user') }}",
dataType: 'json',
delay: 500,
data: function (params) {
return {
needle: params.term // Here we send user input to the controller
};
},
processResults: function (data) {
return {
results: data
};
},
cache: false
}
});
And we have a controller with a function to search for users :
/**
* #Route("/search_users", name="api_search_users")
* #param Request $request
* #return JsonResponse
*/
public function searchUsersAction(Request $request)
{
$needle = $request->get('needle'); // Here we retrieve user input
$users = $this->get(User::class)->searchUsers($needle);
return new JsonResponse($users );
}
EDIT following you last comment
This value is not valid
That's because your value isn't part of the select when the formbuilder add the field. You must add an addEventListener on PRE_SUBMIT to dinamically add this value. You can do it this way :
// Define form modifier
$usersFormModifier = function (FormInterface $form, $users) use ($options) {
$choices = array();
if(is_array($users)) {
$choices = $users;
}
$form->add(
'users',
EntityType::class,
array(
'label' => 'conversation.form.users',
'multiple' => true,
'class' => 'AppBundle\Entity\Security\User',
'choices' => $choices,
'choice_label' => function (User $user) {
return $user->getLastName() . " " . $user->getFirstName();
},
'attr' => array(
'placeholder' => 'default.search_person'
)
)
);
};
// On PRE_SET_DATA, we load users from our object (which only contains their IDs)
$builder->addEventListener(
FormEvents::PRE_SET_DATA,
function (FormEvent $event) use ($usersFormModifier) {
$usersFormModifier($event->getForm(), $event->getData()->getUsers()->toArray());
}
);
// On PRE_SUBMIT, we add the options, so the select will accept newly added values
$builder->addEventListener(
FormEvents::PRE_SUBMIT,
function (FormEvent $event) use ($usersFormModifier) {
$data = $event->getData();
$users = null;
if(isset($data['users'])) {
$users = $this->entityManager->getRepository('AppBundle:Security\User')->findBy(array('id' => $data['users']));
}
$usersFormModifier($event->getForm(), $users);
}
);
As I said at the beginning, if you don't have so muchs tags, and they don't evolve regularly, you can construct your select with all your tags and avoid all the Ajax part of the Select2 javascript code ! (I think it will be easier and sufficient for your case)

Javascript TypeError $(...).functionName is not a function

I'm using the following Javascript to get data via PHP (upload.php) -
<script src="js/jquery.amsify.suggestags.js"></script>
<script>
fetch('./get_hashtags.php').then(response => {
return response.json();
}).then(data => {
var suggestionsArr = [];
data.forEach(function(item){
suggestionsArr.push(item.category);
});
console.log(suggestionsArr);
$('#inputTags').amsifySuggestags({
suggestions: suggestionsArr,
classes: ['bg-warning','bg-warning'],
});
}).catch(err => {
console.log(err);
});
</script>
get_hashtags.php
<?php
// ... some additional database connection details ...
$statement = $pdo->prepare("SELECT category FROM hashtags where active=1");
$hashtags = array();
if ($statement->execute()) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$hashtags[] = $row;
}
}
$pdo = null;
echo json_encode($hashtags);
?>
Unfortunately I'm getting the following error when loading the page -
TypeError: $(...).amsifySuggestags is not a function
at fetch.then.then.data (upload.php:1550)
This is the beginning of jquery.amsify.suggestags.js (https://github.com/amsify42/jquery.amsify.suggestags) -
(function($) {
$.fn.amsifySuggestags = function(options, method) {
/**
* Merging default settings with custom
* #type {object}
*/
var settings = $.extend({
type : 'bootstrap',
tagLimit : 5,
suggestions : [],
classes : [],
backgrounds : [],
colors : [],
whiteList : false,
afterAdd : {},
afterRemove : {},
}, options);
/**
* Initialization begins from here
* #type {Object}
*/
var AmsifySuggestags = function() {
this.selector = null;
this.name = null;
...
I don't get the error message when inserting the $('#inputTags').amsifySuggestags outside of the fetch method with some hardcoded values.
Thanks in advance!

DataTable column is showing object and not displaying actually value?

I am trying to populate DataTable with my Data but DataTable is showing object in columns and not printing the actual values!
Function in Controller:
public function getEvaluationSymptomsAction() {
//Get Evaluation Symptoms from DataBase
$evaluation_symptoms = CxEbEvaluationSymptom::getAllEvaluationSymptomsWithNameForDataTable();
$inferredRemedies = array();
$additonalRemedies = array();
$data = array();
foreach ($evaluation_symptoms as $key => $symptom) {
$data[ $key ][ 'id' ] = $symptom[ 'id' ];
$data[ $key ][ 'title' ] = $symptom[ 'title' ];
// Get Inferred Remedies By Symptom ID
$inferredRemedies = CxEbEvaluationSymptom::getInferredRemediesBySymptomId($symptom[ 'id' ]);
$additonalRemedies = CxEbEvaluationSymptom::getAdditionalSymptomRemediesBySymptomId($symptom[ 'id' ]);
$data[ $key ][ 'remedy' ] = $inferredRemedies;
$data[ $key ][ 'additional-remedy' ] = $additonalRemedies;
$data[ $key ][ 'date_created' ] = $symptom[ 'date_created' ];
}
//print_r($data);exit;
// Return data array
return array('data' => $data);
// Return data
}
The above function return the below array: (NOTE the below array is var_dump version actually data is in JSON format)
Array code is here
Queries:
public static function getInferredRemediesBySymptomId($symptomId){
$queryBuilder = new Builder();
return $queryBuilder
->from(array('es' => 'Cx\EbFront\Models\Evaluation\CxEbEvaluationSymptom'))
->leftJoin('Cx\EbFront\Models\Evaluation\CxEbEvaluationSymptomCause', 'es.id = esc.evaluation_symptom_id','esc')
->leftJoin('Cx\EbFront\Models\Evaluation\CxEbEvaluationCause','esc.evaluation_cause_id = ec.id','ec')
->leftJoin('Cx\EbFront\Models\Evaluation\CxEbEvaluationCauseRemedy','ec.id = ecr.evaluation_cause_id','ecr')
->leftJoin('Cx\EbFront\Models\Evaluation\CxEbEvaluationRemedy','ecr.evaluation_remedy_id = er.id', 'er')
//->leftJoin('Cx\EbFront\Models\Evaluation\CxEbEvaluationSymptom', 'es.id = :ID:', 'es')
->columns('er.id, er.title')
->where('es.is_active = 1')
->andWhere('es.id = :ID:')
->getQuery()
->execute(array('ID' => $symptomId))
//->execute()->setHydrateMode(Resultset::HYDRATE_ARRAYS)
->toArray();
}
/**
* A
* Data for column Additonal Remedies in DataTable
* #return array
*/
public static function getAdditionalSymptomRemediesBySymptomId($symptomId){
$queryBuilder = new Builder();
return $queryBuilder
->from(array('er' => 'Cx\EbFront\Models\Evaluation\CxEbEvaluationRemedy'))
->innerJoin('Cx\EbFront\Models\Evaluation\CxEbEvaluationSymptomRemedy', 'er.id = esr.evaluation_remedy_id','esr')
->columns('er.id, er.title')
->where('er.is_active = 1')
->andWhere('esr.evaluation_symptom_id = :ID:')
->getQuery()
->execute(array('ID' => $symptomId))
->toArray();
}
The below is the JS code for initializing the DataTable:
function EbEvaluationSymptom(){
var $body = $('body');
var $CxRecordsTable = $('#cx-records-table');
// Init the DatTable using the Cx Admin DataTable plugin
cx.common.data.cxAdminDataTables.EbEvaluationSymptom = $CxRecordsTable.cxAdminDataTable({
ajaxUrl: '<?php echo $this->CxHelper->Route('eb-admin-get-evaluation-symptoms')?>',
columns: [
cx.common.admin.tableEditColumn('id'),
{ data: 'title' },
{ data: 'remedy' },
{ data: 'additional-remedy' },
{ data: 'date_created' }
],
});
};
JSON Response:
https://pastebin.com/g2mhhS4D

DataTables doesn't know how to format the array of object(s) supplied for remedy & additional-remedy.
Assuming there is always one object in each of those arrays, you want to access the first object in each array and use its title property:
columns: [
cx.common.admin.tableEditColumn('id'),
{ data: 'title' },
{ data: 'remedy.0.title' },
{ data: 'additional-remedy.0.title' },
{ data: 'date_created' }
],
If you plan to have more than 1 element in each array, you'll need a different approach