I am high school math teacher who is teaching myself programming. My apologies in advance if I don't phrase some of this correctly.
I am collecting CSV data from the user and trying to move it to a SQLite database via Python.
Everything works fine unless one of the values has a space in it.
For example, here is part of my JavaScript object:
Firstname: "Bruce"
Grade: ""
Lastname: "Wayne Jr"
Nickname: ""
Here is the corresponding piece after applying JSON.stringify:
{"Firstname":"Bruce","Lastname":"Wayne Jr","Nickname":"","Grade":""}
This is then passed to Python via a form. In Python, I use:
data = request.form.get("data")
print(data)
data2 = json.loads(data)
print(data2)
I get a bunch of error messages, ending with: json.decoder.JSONDecodeError: Unterminated string starting at: line 1 column 250 (char 249) and the log of the first print gives:
[{"Firstname":"Jason","Lastname":"Bourne","Nickname":"","Grade":"10"},
{"Firstname":"Steve","Lastname":"McGarret","Nickname":"5-0","Grade":""},
{"Firstname":"Danny","Lastname":"Williams","Nickname":"Dano","Grade":"12"},
{"Firstname":"Bruce","Lastname":"Wayne
So it seems to break on the space in "Wayne Jr".
I used what I learned here to build the basics:
https://bl.ocks.org/HarryStevens/0ce529b9b5e4ea17f8db25324423818f
I believe this JavaScript function is parsing the user data:
function changeDataFromField(cb){
var arr = [];
$('#enter-data-field').val().replace( /\n/g, "^^^xyz" ).split( "^^^xyz" ).forEach(function(d){
arr.push(d.replace( /\t/g, "^^^xyz" ).split( "^^^xyz" ))
});
cb(csvToJson(arr));
}
Updates based on comments:
I am using a POST request. No AJAX.
There are actually 2 inputs for the user. A text box where they can paste CSV data and a file upload option. Here is some more of the JavaScript.
// Use the HTML5 File API to read the CSV
function changeDataFromUpload(evt, cb){
if (!browserSupportFileUpload()) {
console.error("The File APIs are not fully supported in this browser!");
} else {
var data = null;
var file = evt.target.files[0];
var fileName = file.name;
$("#filename").html(fileName);
if (file !== "") {
var reader = new FileReader();
reader.onload = function(event) {
var csvData = event.target.result;
var parsed = Papa.parse(csvData);
cb(csvToJson(parsed.data));
};
reader.onerror = function() {
console.error("Unable to read " + file.fileName);
};
}
reader.readAsText(file);
$("#update-data-from-file")[0].value = "";
}
}
// Method that checks that the browser supports the HTML5 File API
function browserSupportFileUpload() {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
}
// Parse the CSV input into JSON
function csvToJson(data) {
var cols = ["Firstname","Lastname","Nickname","Grade"];
var out = [];
for (var i = 0; i < data.length; i++){
var obj = {};
var row = data[i];
cols.forEach(function(col, index){
if (row[index]) {
obj[col] = row[index];
}
else {
obj[col] = "";
}
});
out.push(obj);
}
return out;
}
// Produces table for user to check appearance of data and button to complete upload
function makeTable(data) {
console.log(data);
send_data = JSON.stringify(data);
console.log(send_data);
var table_data = '<table style="table-layout: fixed; width: 100%" class="table table-striped">';
table_data += '<th>First name</th><th>Last name</th><th>Nickname</th><th>Grade</th>'
for(var count = 0; count < data.length; count++) {
table_data += '<tr>';
table_data += '<td>'+data[count]['Firstname']+'</td>';
table_data += '<td>'+data[count]['Lastname']+'</td>';
table_data += '<td>'+data[count]['Nickname']+'</td>';
table_data += '<td>'+data[count]['Grade']+'</td>';
table_data += '</tr>';
}
table_data += '</table>';
table_data += '<p><form action="/uploaded" method="post">';
table_data += 'Does the data look OK? If so, click to upload. ';
table_data += '<button class="btn btn-primary" type="submit">Upload</button><p>';
table_data += '<input type="hidden" id="data" name="data" value='+send_data+'>';
table_data += '<input type="hidden" name="class_id" value="{{ class_id }}">';
table_data += '</form>';
table_data += 'Otherwise, fix the file and reload.';
document.getElementById("result_table").innerHTML = table_data;
}
</script>
The JavaScript can be made a lot simpler. If you do the following instead, do you have any problems with the JSON getting cut off?
document.getElementById('update-data-from-file').addEventListener('change', function(evt){
var file = evt.target.files[0];
document.getElementById('filename').innerText = file.name
if (file === "")
return;
Papa.parse(file, {
header: true,
skipEmptyLines: true,
complete: function(results) {
json = results.data
console.log(json)
// Do stuff with the json here
}
});
document.getElementById('update-data-from-file').value = ''
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.2/papaparse.min.js"></script>
</head>
<body>
<label>
Upload CSV
<input type="file" name="File Upload" id="update-data-from-file" accept=".csv" />
</label>
<div id="filename">No file chosen</div>
</body>
</html>
The problem was the way I was sending the JSON string -- it wasn't in quotes so anytime there was a space in a value, there was a problem.
To fix it: I got the JSON from the answer above, then before sending the JSON string via a POST request, I enclosed it in quotes.
send_data = JSON.stringify(json);
send_data = "'" + send_data + "'";
I am now able to send values that have spaces in it.
Related
I want to perform a similar task like what described in the following video,
https://youtu.be/NoAdMtqtrTA?t=2156
To add multiple rows in the table and then insert it all in a batch to the database.
Any reference or any sample code will be really appreciable. Thank you.
The Javascript code is :
<script>
var data_dict = [];
// function called when Add row button is clicked
function Add_input_row()
{
var input_row ='<tr id="input_row">\
<td><input id="input1"></td>\
<td><input id="input2"></td>\
<td><button onclick="save_row()">save</button></td>\
</tr>';
var table_element = document.getElementById("data_table");
//do nothing if input_row already exists
if(document.getElementById("input_row")) {
alert("input row already exists !");
}
else {
table_element.innerHTML = table_element.innerHTML + input_row;
}
}
// function called when Save button is clicked
function save_row()
{
var field_val1 = document.getElementById("input1").value;
var field_val2 = document.getElementById("input2").value;
//unique id for each added data row needed when reading data directly from table
var data_id = data_dict.length;
//push the data to data dictionary
data_dict.push({
key: data_id,
value: [field_val1,field_val2]
});
var data_row ='<tr>\
<td id="data_field1'+data_id+'">'+field_val1+'</td>\
<td id="data_field2'+data_id+'">'+field_val2+'</td>\
<td></td>\
</tr>';
// remove input row
document.getElementById("input_row").remove();
//append data to table
var table_element = document.getElementById("data_table");
table_element.innerHTML = table_element.innerHTML + data_row;
}
// send data to django views
function update_database() {
var csrf_token = 'your_csrf_token';
$.ajax({
method: 'POST',
url: 'update_database', // name of your djnago view
data: {"datatobeupdated":data_dict,"csrfmiddlewaretoken" : csrf_token},
success: function (response) {
//when executed succesfully empty the data_dict and table
data_dict = [];
var table_element = document.getElementById("data_table");
table_element.innerHTML = "";
},
error: function (response) {
alert("Something Went Wrong");
}
});
}
The Html table is :
<table>
<thead>
<tr><th title="Field #1">Field1</th>
<th title="Field #2">Field2</th>
</tr>
</thead>
<tbody id="data_table">
</tbody>
</table>
<button onclick="Add_input_row()">Add row</button>
<button onclick="Update()">Update</button>
You can access the data in your django view like :
def update_database(request):
if request.is_ajax():
request_data = request.POST
## data dictionary received
datatobeupdated = request_data['datatobeupdated']
I'm confused about how to do it via Ajax or Json, but how can I send the selection array (curCheck) on-click to Django views and receive it as a python array
javascript
document.getElementById('results').addEventListener('click', function(){
html_table = '<thead><tr><th>Currency</th><th>Amount</th><th>Symbol</th>><tr/><thead/>'
var checkElements = document.getElementsByClassName('ch');
for(var i =0; i< curname.length; i++){
if (checkElements[i].checked) {
var curChecked = curname[i];
var JsonArr = JSON.stringify(curChecked);
postcurChecked(JsonArr)
html_table += '<tr><td>' + curname[i] + '</td>';
}
}
document.getElementById('result_table').innerHTML = html_table;
},false;
ajax
function postsubChecked(curChecked) {
$.ajax({
"url": "http://127.0.0.1:8000/results/",
"type": "POST",
"data": {"checkbox": curChecked},
"headers": { 'X-CSRFToken': getCookie('csrftoken')}
})
}
in django
def currencyChecked(request):
body_unicode = request.body.decode('utf-8')
body_unicode = body_unicode.replace('%22','')
print(body_unicode) json_data = json.loads(body_unicode.read())
I would like to see the python array print to see it is passed to the back
but I keep getting this error:
json_data = json.loads(body_unicode.read()) AttributeError: 'str' object has no attribute 'read'
For getting the selected checkbox values and sending as an array using ajax you can use jquery like this:
consider you have multiple checkboxes and a button.
<input type="checkbox" name="imageName">
<input type="checkbox" name="imageName">
.......
<button id="deletePhoto">Delete</button>
after selecting multiple checkbox values click on this button. On clicking the below jquery will be triggered to make an arrya of selected checkbox values.
//jquery for getting the selelcted checkbox values
$(document).on("click","#deletePhoto",function(){
var favorite = [];//define array
$.each($("input[name='imageName']:checked"), function(){
favorite.push($(this).val());
});
alert("Photo Selected: " + favorite.join(", "));
if(favorite.length == 0){
alert("Select Photo to delete");
return false;
}
//ajax for deleting the multiple selelcted photos
$.ajax({type: "GET",
url: "/olx/deletePhotoFromEdit",
data:{
favorite:favorite
},
success: function(){
// put more stuff here as per your requirement
});
}
});
});
In the view you can get the array like this:
selected_photo = request.GET.getlist('favorite[]')
I'm making a POST request from AngularJS to Python.
I started with an JavaScript example. It works properly returning all the values.
However, when I try to do it from AngularJS I'm not able to read the value of the variable posted.
JAVASCRIP EXAMPLE THAT WORKS PROPERLY (I'm able to get the value (Mike) back of Name):
JS code
<script language="Javascript">
function asyncChange()
{
var request;
if (window.XMLHttpRequest) {
request = new window.XMLHttpRequest();
} else {
// Versiones antiguas de Internet Explorer.
request = new window.ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST","nctest.py" , true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("Name=Mike");
request.onreadystatechange = function()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("myLabel").innerHTML = "Hello " + request.responseText + "!";
}
}
}
</script>
nctest.py
#!/usr/bin/python
import cgi
input = cgi.FieldStorage()
print "Content-type: text/html\n\n"
print "input[Pe].value: "
print input["Pe"].value
ANGULARJS DOESN'T WORK PROPERLY (I'm not able to get the value (Mike) back of Name):
Angularjs code:
(function(){
'use strict'
var sectest= {
controller:sectestCtrl,
templateUrl:'app/components/component_test/test.html',
}
angular
.module('myapp')
.component('secTest',sectest);
function sectestCtrl($http){
var prac= this;
prac.method = 'POST';
prac.url = 'nctest.py';
prac.data = {Name : 'Mike'};
prac.data_answer
prac.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
prac.sendHTML = send;
function send(){
prac.code = null;
prac.response = null;
$http({method: prac.method, headers: prac.headers, url: prac.url, data: $.param(prac.data)}).
then(function(response) {
prac.status = response.status;
prac.data_answer = response.data;
console.log("OK prac.data_answer: ", prac.data_answer)
}, function(response) {
prac.data_answer = response.data || 'Request failed';
prac.status = response.status;
});
};
}
})();
nctest.py code
#!/usr/bin/python
import json
import cgi
input = cgi.FieldStorage()
print "Content-type: text/html\n\n"
print input["Name"].value
The problem is that prac.data_answer prints blank value.
I have already try with different headers for both angularjs and python codes but none seems to work:
prac.headers = { 'Content-Type': 'application/json' };
prac.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
prac.headers = { 'Content-Type': 'text/html\n\n' };
Many thanks.
There are 2 separate issues you're trying to address. Server (CGI) & client(angularjs). First check to see that you are receiving the data over the network - using Chrome developer tools, under the Network tab. If so, there's no need to change the Content-Type to json, since angular by default assumes all http data is in json format.
I don't think you need all those attributes for a post request. Seems like an overkiller when it can be simpler. Try this:
$http.post(url, data).then(function(response){
console.log(response.data);
});
I have the below code in Ajax to display the data from python stored in MongoDB.
<script>
function f(){
$(document).ready(function(){
$.get('ajax1', function(result){
$.each(result, function(index, element) {
alert(JSON.stringify(element));
});
});
});
}
</script>
Python call for the same:
#route('/ajax1')
def func():
client = MongoClient()
db = client.collection
result = db.collection.find({},{'_id':0}).limit(2)
arr = []
for document in result:
arr.append(doc)
return (dict(items=arr))
I am getting the result as below:
[{"Name":"abc","Place":"SomePlace","Designation":"des"}]
[{"Name":"NextName","Place":"NextPlace","Designation":"Nextdes"}]
I want to print it in this format or in the form of a table:
abc Someplace des
NextName Nextplace Nextdes
Can somebody tell me how to do it? Seems simple but I am unaware of it.
Thanks!
To me it would make more sense to use the property names in the javascript as it's easier to understand and more verbose.
<script>
function f(){
$(document).ready(function(){
$.get('ajax1', function(result){
$.each(result, function(index, element) {
var row = element.Name + " " + element.Place + " " + element.Designation;
console.log(row);
});
});
});
}
</script>
Is there a way to change how selection field looks? I need to change it to look like a bunch of boolean fields (technically it would be one field, not multiple boolean fields. Only look would change)?
It should look something like this (it looks like there are multiple fields, but technically it should be only one):
And it should function like selection field - that you can only select one value. Is it possible to do it?
Update:
Found this - http://help.openerp.com/question/29061/how-to-add-radio-button-widget/
It seems it is possible to do with widget on OpenERP 8 (using radio widget for selection field). So I think it might be possible to move such functionality in OpenERP 7.
I managed to move radio widget from OpenERP 8 to OpenERP 7. So I will post it how I've done. Maybe some one will need it too.
Basically you only need two main files, one js and one xml (also empty __init__.py is needed, because OpenERP will throw error that it didn't find that module).
in __openerp__.py:
'js': ['static/src/js/widget_radio.js'],
'qweb': ['static/src/xml/widget_radio.xml'],
widget_radio.js (web_widget_radio is addon name):
openerp.web_widget_radio = function (instance)
{
instance.web.form.widgets.add('radio', 'instance.web_widget_radio.FieldRadio');
instance.web_widget_radio.FieldRadio = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
template: 'FieldRadio',
events: {
'click input': 'click_change_value'
},
init: function(field_manager, node) {
/* Radio button widget: Attributes options:
* - "horizontal" to display in column
* - "no_radiolabel" don't display text values
*/
this._super(field_manager, node);
this.selection = _.clone(this.field.selection) || [];
this.domain = false;
},
initialize_content: function () {
this.uniqueId = _.uniqueId("radio");
this.on("change:effective_readonly", this, this.render_value);
this.field_manager.on("view_content_has_changed", this, this.get_selection);
this.get_selection();
},
click_change_value: function (event) {
var val = $(event.target).val();
val = this.field.type == "selection" ? val : +val;
if (val == this.get_value()) {
this.set_value(false);
} else {
this.set_value(val);
}
},
/** Get the selection and render it
* selection: [[identifier, value_to_display], ...]
* For selection fields: this is directly given by this.field.selection
* For many2one fields: perform a search on the relation of the many2one field
*/
get_selection: function() {
var self = this;
var selection = [];
var def = $.Deferred();
if (self.field.type == "many2one") {
var domain = instance.web.pyeval.eval('domain', this.build_domain()) || [];
if (! _.isEqual(self.domain, domain)) {
self.domain = domain;
var ds = new instance.web.DataSetStatic(self, self.field.relation, self.build_context());
ds.call('search', [self.domain])
.then(function (records) {
ds.name_get(records).then(function (records) {
selection = records;
def.resolve();
});
});
} else {
selection = self.selection;
def.resolve();
}
}
else if (self.field.type == "selection") {
selection = self.field.selection || [];
def.resolve();
}
return def.then(function () {
if (! _.isEqual(selection, self.selection)) {
self.selection = _.clone(selection);
self.renderElement();
self.render_value();
}
});
},
set_value: function (value_) {
if (value_) {
if (this.field.type == "selection") {
value_ = _.find(this.field.selection, function (sel) { return sel[0] == value_;});
}
else if (!this.selection.length) {
this.selection = [value_];
}
}
this._super(value_);
},
get_value: function () {
var value = this.get('value');
return value instanceof Array ? value[0] : value;
},
render_value: function () {
var self = this;
this.$el.toggleClass("oe_readonly", this.get('effective_readonly'));
this.$("input:checked").prop("checked", false);
if (this.get_value()) {
this.$("input").filter(function () {return this.value == self.get_value();}).prop("checked", true);
this.$(".oe_radio_readonly").text(this.get('value') ? this.get('value')[1] : "");
}
}
});
};
widget_radio.xml:
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="FieldRadio">
<span t-attf-class="oe_form_field oe_form_field_radio #{widget.options.horizontal ? 'oe_horizontal' : 'oe_vertical'}" t-att-style="widget.node.attrs.style">
<span t-if="!widget.get('effective_readonly')">
<t t-if="widget.options.horizontal">
<t t-set="width" t-value="Math.floor(100 / widget.selection.length)"/>
<t t-if="!widget.options.no_radiolabel">
<t t-foreach="widget.selection" t-as="selection">
<label t-att-for="widget.uniqueId + '_' + selection[0]" t-att-style="'width: ' + width + '%;'"><t t-esc="selection[1]"/></label>
</t>
<br/>
</t>
<t t-foreach="widget.selection" t-as="selection">
<div t-att-style="'width: ' + width + '%;'">
<span class="oe_radio_input"><input type="radio" t-att-name="widget.uniqueId" t-att-id="widget.uniqueId + '_' + selection[0]" t-att-value="selection[0]"/></span>
</div>
</t>
</t>
<t t-if="!widget.options.horizontal">
<t t-foreach="widget.selection" t-as="selection">
<div>
<span class="oe_radio_input"><input type="radio" t-att-id="widget.uniqueId + '_' + selection[0]" t-att-name="widget.uniqueId" t-att-value="selection[0]"/></span><label t-if="!widget.options.no_radiolabel" t-att-for="widget.uniqueId + '_' + selection[0]"><t t-esc="selection[1]"/></label>
</div>
</t>
</t>
</span>
<span t-if="widget.get('effective_readonly')" class="oe_radio_readonly"><t t-esc="widget.get('value')[1]"/></span>
</span>
</t>
</templates>
P.S. You can find original code in OpenERP trunk version.
Yes. its possible. You can see a similar example in openerp itself. Go to settings / users /access rights tab. There you can see all the list of boolean and selection fields for adding the groups. Actually it is a many2many field related to res.groups and its view is modified in such a way that all the groups that are inherited and under the same category will be viewed as a selection list and all others will be in boolean. Please check the code in the base/ res/res_users.py file. Hope it will be helpful for you.