Axios how to send files inside objects without FormData? - javascript

I have an object like this
{
data1: 1,
data2: 2,
file1: File,
file2: File,
file3: File,
objects: [
{name: "test1", info: "test", related: [1,2,3], files: [File, File, File]},
{name: "test2", info: "test", related: [1,2,3], files: [File, File, File]},
{name: "test3", info: "test", related: [1,2,3], files: [File, File, File]}
]
}
I need to somehow send it to the backend with data and files (ideally keeping the object structure, but it will be fine if the files are sent in formdata alongside main object and I get them by keys that I will store in objects instead of the files themselves)

Related

How to retrieve data from json file

I am having trouble with accessing my json file from my javascript file. I would like to change the object to a different text in my json file once a submit button is clicked on the webpage. I am aware that I would use ajax to achieve this goal, but I do not know how to access the json file.
This is the db.json file
{
{
"assets": [
{
"id": "0946",
"manufacturer": "SONY",
},
{
"id": "0949",
"manufacturer": "AUDIOTECNIA"
}
],
"transfers": [
{
"id": 1,
"status": "in-progress"
}
]
}
This is my Javascript file
$('form').on('submit', function(e){
e.preventDefault();
parsedData = JSON.parse(db.json);
console.log(parsedData[0].id)
//Changing Status
$.ajax({
type: "PATCH",
url: `http://localhost:3000/transfers/`
});
I've tried using parseData because I read that is how to retrieve the object, from the json file, but I do not believe I am writing it correctly. What documentation or steps would one recommend for solving this issue?
You have an extra comma after "in-progress",
const parsedData = JSON.parse(`{
"transfers": [ {
"id": 1,
"status": "in-progress"
}]
}`)
Then, to access id in parsedData:
console.log(parsedData.transfers[0].id)
You did not initialize the variable parsedData.
var parsedData = JSON.parse(db.json);

Chrome Extension | javascript file manipulation at run time on button click in popup.html

I’m working on a chrome extension where I’d like to update one javascript file at runtime on button click in popup.html
Can anyone tell me is there any possibility manipulate javascript file at rutime with a button click?
For example: Javascript file want to manipulate named index.js, containing only one array object as following :
let obj1 = [
{ Name: "Peter", Dep: "Team1" },
{ Name: "Abhilasha", Dep: "Team2" }
]
New object to be added/pushed to the file index.js :
{ Name: "Ani", Dep: "Team3" }
On clicking the button on extension popup it will update the index.js with the new object and resultant array object in the index.js is as follow:
let obj1 = [
{ Name: "Peter", Dep: "Team1" },
{ Name: "Abhilasha", Dep: "Team2" },
{ Name: "Ani", Dep: "Team3" }
]
I am not sure whether file manipulation is possible from front-end using onClick event. It would be really helpful if you guys can guide me. Thanks in advance!

How to convert JSON string with attribute named with parenthesis to Typescript

I'm working with an Angular project. From a REST web service, I received the following JSON data:
{
records: [{
Contributor(Insertion): ["rec7wILrxxqg3R5MD"],
Country(Artist): ["E"],
ID: 70,
Museum: ["recFUvc63FW00oxvO"],
Name: ["Francisco "],
Notes: "1821-1823",
Pictures: [{id: "attEfUG32VAK2GYSt"}],
RecordID: "rec17E0Nisx3oRhhF",
Title: "Saturno che divora i suoi figli",
Year: 1823,
id: "rec17E0Nisx3oRhhF"}
]}
As you can see, there is a Contributor(Insertion) and Country(Artist) field. How can I parse it and convert in a Typescript attribute? Thank you in advance.
First your server needs to send you a valid JSON, JSON isn't just forgiving JavaScript Object
JSON keys must be strings wrapped in two quotations
export interface IMyInterface{
"records": [{
"key()": ["rec7wILrxxqg3R5MD"],
"key2": ["E"],
"key3": 70,
"key4": ["recFUvc63FW00oxvO"],
"key5": ["Francisco "],
"key6": "1821-1823",
"key7": [{"id": "attEfUG32VAK2GYSt"}],
"key8": "rec17E0Nisx3oRhhF",
"key9": "Saturno che divora i suoi figli",
"key10": 1823,
"key11": "rec17E0Nisx3oRhhF"}
]}
See more how to make good valid JSON
Then You need to handle the function keys as class and constructor for typing.
Pro-tip: automate your ts interface creation : http://json2ts.com/

How to properly compile html form data into JSON object

I have a form which collects some information (asset cost, asset description, shareholders, and how much each of the shareholders own). I want to compile all this information in a JSON object and post it. When I collect the data and JSON.stringify() it, it looks like this:
[ { name: '1', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' },
{ name: '3', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' } ]
I want to clean this data up before posting so it looks like this:
{
"asset_desc": "boat",
"asset_cost": "100",
"org_id": 2,
"share_holders": {
"1": "50",
"2": "50"
}
}
I am running jQuery. Does jQuery have some built-in helpers that would make the cleaning up of this data simple? The function I'm using to get the data like this in the first place is:
formdata = $('#addpurchaseform');
data = JSON.stringify(formdata.serializeArray());
Is there a better way to do this so that my data is in a cleaner state? Am I even thinking about this correctly (I am new to web development)?
Not sure if this matters, but the receiving end of this is Python / Django so I figured it would be better if I sent a clean JSON object rather than trying to parse / clean the mess after it was received.
If you're looking for a jQuery plugin, then try this:
https://github.com/marioizquierdo/jquery.serializeJSON

are there any bugs about 'dust js recursion'?

Dust js web gives us some examples. One of them is recursion.
When I change the 'name' of the json in the 3rd section and the 'name' in 1st section to other string like 'node', the output is wrong! What am I doing wrong?
Code:
{node}{~n}{#kids}{>recursion:./}{/kids}
{
"node": "1",
"kids": [{
"node": "1.1",
"kids": [{
"node": "1.1.1"
}]
}]
}
It doesn't work because "recursion" is a template loaded in the dust context.
In dust you can load other templates by name: So when he writes this:
{>recursion:./}
He is loading a template called recursion. you can find it in the examples files.
this is the recursion template:
{
name: "recursion",
source: "{name}{~n}{#kids}{>recursion:./}{/kids}",
context: {
name: '1',
kids: [
{
name: '1.1',
kids: [
{name: '1.1.1'}
]
}
]
},
expected: "1\n1.1\n1.1.1\n"
}
You should create another template with the node fields, load it in the dust context and then just use it.

Categories