Use javascript to update a json file - javascript

I'd like to preface this by saying I know what I'm doing isn't ideal.
With that covered:
I need to update data in a JSON file via javascript.
Here is the JSON file as it currently stands:
{
"nextid" : 3,
"ingredients" : [
{
"id": 1,
"name": "onion",
"kilojoules": 180,
"quantity": 1,
"measurement": "whole",
"nutrition": [
{"value": "Fat Total", "quantity": 110},
{"value": "Saturated Fat", "quantity": 46},
{"value": "Sodium", "quantity": 4},
{"value": "Carbohydrates Total", "quantity": 10000},
{"value": "Sugar", "quantity": 5000},
{"value": "Fibre", "quantity": 2000},
{"value": "Proten", "quantity": 1000}
]},
{
"id" : 2,
"name": "carrot",
"kilojoules": 56,
"quantity": 1,
"measurement": "whole",
"nutrition": [
{"value": "Fat Total", "quantity": 66},
{"value": "Saturated Fat", "quantity": 11},
{"value": "Sodium", "quantity": 26},
{"value": "Carbohydrates Total", "quantity": 3000},
{"value": "Sugar", "quantity": 2000},
{"value": "Fibre", "quantity": 1000},
{"value": "Proten", "quantity": 279}
]}
]
}
Now let's say I want to edit the carrot object. I've built an updated carrot object on my html page and have it sitting as an object in the javascript.
What am I going to need to do to update the source json with my edits?
Like I said before, I know this isn't ideal. I should have used a database for storing and manipulating data, but I've made my bed now and I have to get this working, regardless of how much it might make you all cringe.
Research tells me I'm going to need to use PHP or ASP on the server side to collect the parameters the javascript passes to it, but I have no idea where to begin with that.
I'm working in visual studio 2012 and the parameters of the project prohibit me from using addons. NuGet code libraries yes, but no addons. On that basis, I think it means I can't use PHP. Am I correct in my thinking there?
Note: Yes it's for an assignment, but altering the json file is beyond the scope of the requirements. Being able to process json data dynamically is enough for the project, I'd just REALLY like to be able to put some back.
Thanks in advance
EDIT: Probably should have shared this too. This is the javascript that opens the json file. The result of the opening is stored in a script wide variable called ingJson.
function downloadIngredients() {
$(document).ready(function () {
$.getJSON("/data/ingredientsInfo.js", function (result) {
try
{
ingJson = result;
ingredients = result.ingredients;
ingredients.sort(orderByNameAscending);
buildListBox(ingredients);
}
catch (err) {
alert(err.message);
}
});
});
}

To edit a JSON file:
Open the file with php
Send the contents to the browser (Just dump it as string in a variable in a script tag)
Parse the JSON with JavaScript (onload -> get the string from the script tag)
Edit the object
Convert it to a JSON string again
Send it back to php
Have php overwrite the file.
It's a shame you can't just edit the file directly in php, that'd render steps 2-6 unnecessary, you'd just parse, edit, and encode the JSON in php.
Edit: Since you seem to have the data in JavaScript already, steps 1-3 are accounted for.

Related

Editing JSON file at multiple positions without rewriting complete file

I have a JSON file that contains lots of nodes. Each node has a unique id. The following is an example skeleton structure of the JSON file.
{
"node1": {
"id": "1",
"name": "student",
"properties": {
"name": "Ram",
"lastname": "Kumar",
"age": "20"
}
},
"node2": {
"id": "2",
"name": "Teacher",
"properties": {
"name": "Ram",
"subject": "Computers"
}
}
Now, this was just sample data. Suppose, I have to find node 2, provided I have the position of the node in the file. That is it's beginning and the end. I create a read stream from the start position and the end position of the file to get the object within the complete JSON object in the file. Now, using JSON.parse function I am able to create an object within the program after parsing it.
But, now I use a writestream to make the changes in the object at the required positions after computing them.
For example, I have to edit the subject property of the teacher, and the main rule is I cannot completely write the object again. Rather, create a writestream at the position where there is subject property and just edit that value.
So, the question is how to do so? And that to with multiple positions to edit, that is editing multiple properties, without rewriting them all.
I know I might face an issue if I use multi-threading for this to simultaneously edit the multiple properties at once, but I need a work around that too.

JSONLint says valid JSON but I cannot grab values from it in JavaScript

I am trying to parse a JSON from a GET request in JavaScript. I can run it through JSONLint and other tools and it's fine. If I copy/paste the exact result into the JavaScript I can access the values from the object as well.
Here is a shortened example of what the JSON structure looks like:
{
"odata.metadata": "EXAMPLE.com/$metadata#EXAMPLE.results",
"value": [{
"SerialNo_Company": "1",
"Calculated_AsBuilt": "AsBuilt",
"SerialNo_SerialNumber": "1",
"SerialNo_PartNum": "2A",
"JobHead_RevisionNum": "A",
"JobMtl_MtlSeq": 30,
"JobMtl_PartNum": "A123",
"JobMtl_RevisionNum": "A",
"JobMtl_Description": "KEY",
"JobMtl_QtyPer": "1.00000000",
"JobMtl_IUM": "EA",
"JobHead_JobNum": "13",
"JobMtl_IssuedQty": "2.00000000",
"JobMtl_RequiredQty": "2.00000000",
"RowIdent": "7e91b43a-897c-49b4-b68f-307b9ba74832"
}, {
"SerialNo_Company": "1",
"Calculated_AsBuilt": "AsBuilt",
"SerialNo_SerialNumber": "1",
"SerialNo_PartNum": "2A",
"JobHead_RevisionNum": "A",
"JobMtl_MtlSeq": 30,
"JobMtl_PartNum": "A123",
"JobMtl_RevisionNum": "A",
"JobMtl_Description": "KEY",
"JobMtl_QtyPer": "1.00000000",
"JobMtl_IUM": "EA",
"JobHead_JobNum": "14",
"JobMtl_IssuedQty": "2.00000000",
"JobMtl_RequiredQty": "2.00000000",
"RowIdent": "6251fbaf-36d0-4fcf-b65a-9dde70ffb13d"
}]
}
This format isn't entirely correct though, what it actually outputs has a structure like so:
"{\r\n \"odata.metadata\":\"EXAMPLE.com/$metadata#Example.results\",\"value\":[\r\n {\r\n \"SerialNo_Company\":\"1\",\"Calculated_AsBuilt\":\"AsBuilt\",\"SerialNo_SerialNumber\":\"1\",\"SerialNo_PartNum\":\"2A\",\"JobHead_RevisionNum\":\"A\",\"JobMtl_MtlSeq\":30,\"JobMtl_PartNum\":\"A13518N-28-KS\",\"JobMtl_RevisionNum\":\"A\",\"JobMtl_Description\":\"KEY\",\"JobMtl_QtyPer\":\"1.00000000\",\"JobMtl_IUM\":\"EA\",\"JobHead_JobNum\":\"13\",\"JobMtl_IssuedQty\":\"2.00000000\",\"JobMtl_RequiredQty\":\"2.00000000\",\"RowIdent\":\"111531e1-f4da-4d2d-b980-0074227a474e\"\r\n }\r\n ]\r\n}
When I try to query the first structure when hard coded in javascript, for example
object.value[0]
I get the first value and all is good.
The second one does not return a value with the same query. I removed the \r\n and it did not work. Also, JSON.stringify() puts in a bunch of backslashes in the structure and I don't know why.
Thanks for reading if you made it this far, please help.
The solution was to change the output in my node.js app. I was using res.json() and it was double-encoding the response. The output resulted in a javascript readable format from there. Thanks to Heretic Monkey for the answer

Dynamic rendering of a datagrid/table in React given JSON data from API

I have this json data that is gotten from an API end point.
[{
"id": 1,
"style": "A",
"color": "black",
"size": "30",
"quantity": "122.00"
},
{
"id": 2,
"style": "B",
"color": "maroon",
"size": "24",
"quantity": "48.00"
},...]
I know I can use array.map() to loop over the data and give me a table with headers 'style','color','size', and 'quantity' with corresponding data rows below.
What I want to do is transform the rendering into this table format as it is more human-readable and a big plus would be to have the cells editable also (e.g. data ties back to state). Specifically, the sizes are in the column headers. How can I do this using either plain react/javascript logic or even better is there a popular React package that has this capability? Currently looking at react-table and react-virtualized but don't have enough experience on these packages to do something complex. Some code would be highly appreciated.
Here is the image of the table which i created.Hope you are looking for this
And here is the link for the project
https://github.com/AdnanShah/ReactJS-KretaHub-

How do I make a basic typeahead search of JSON data using javascript or jQuery?

I have a JSON data file stored locally on my PC. The file is an array of various "name": "value". For instance -
[
{
"name": "Joe",
"id": "0",
"age": "24",
},
{
"name": "Mary",
"id": "1",
"age": "25",
}
]
Now I need to make a typeahead search box for this kind of JSON data using javascript.
The code I wrote is displayed in the image:
Where "dummy" is the name of my locally stored JSON file. The code is not displaying the suggestive data from the JSON file and just gives me an input search box to enter stuff. How do I make it work? Kindly correct me and help.

Angularjs: 'SyntaxError: Unexpected token , ' when loading object

I'm trying to use Symphony CMS to output its XSL as JSON, for use in the angular phonecat app example from the tutorial. My list view json is output as an array with [{ }] brackets around it. My detail view json is output with only { } around it:
{
"position": 1,
"order": 3,
"total": "1",
"id": "sunt",
"sym_id": "21",
"cat": "back-end",
"imageUrl": "http://localhost:8080/workspace/images/phones/Nondell-streak-7.0.jpg",
"name": "Sunt",
"done": "No",
"priority": "medium",
"date-created" : "18 November 2015",
"date-modified" : "19/11/15 10:41am",
"date-due" : "18/11/15 2:13pm",
"snippet": "Quam nihil molestiae"
}
When loading my page the list view loads. When I click on an item the detail view tries to load but I get: SyntaxError: Unexpected token ,. Why? The syntax seems normal to me?
A big problem I am struggling with is that my json is created dynamically with the CMS but no actual files are on the server as far as I know.
Before I was getting the error: Error in resource configuration for action get. Expected response to contain an object but got an array so I made some changes so the list is output as an array, and the single views are output as an object.
My json is generated on localhost:8080/json/{parameter}. The param is 'todos' when not set. So my list view is situated at localhost:8080/json/todos. The param takes the selected object's name, so my detail view would be at localhost:8080/json/foo when I press the link generated by angular.
I hope my question is complete and makes sense :D

Categories