Combine multiple JSON files into one; retrieve using jQuery/getJSON() - javascript

I have some jQuery code which retrieves content using getJSON().
There are n JSON files, which are retrieved from the server as needed:
/json-content/data0.json
/json-content/data1.json
/json-content/data2.json
etc...
Instead, I want to store all the JSON in a single file to reduce the number of HTTP requests needed to retrieve the data.
What is the best way to combine the JSON files into one?
If I concatenate the JSON files together, it no longer works with getJSON().
UPDATE - clarified my question

Either as individual attributes or as an array
{
"data1":{stuff for data1},
"data2":{stuff for data2},
"data3":{stuff for data3}
}
or
{"response":[
{stuff for data1},
{stuff for data2},
{stuff for data3}]}

If you really want to reduce the number of HTTP requests from the client, one possible way is like this:
Build a server side proxy that get JSon files from the third party data sources
Merge your 3 JSon files in one single JSon file
Make a single $.getJSON() call to your single JSon from client
To merge Json files, look at this post.

Related

How to pass data from NodeJS API as a variable to a static JS file?

I have made a NodeJS REST API, which returns JSON data of questions
I have a static JS file which does DOM manipulations on client side to show different questions in an order, it takes questions from the questions array.
I am able to get data from the API on the pug render engine and to pass it on the main page, but unable to find a way to pass that data as a variable to the JS file which does DOM manipulation on the page.
I have thought of an approach to fetch data from API in the static js file itself but it doesn't seem to be an effective approach because request to API is done in the render engine itself.
My viewsConroller:
My pug template is able to access the questions:
but I can't find a way to send questions array as a variable to the static JS file which does the DOM manipulation.
I think fetching the json data in your static js file would be the best thing. Other than that you could do this:
let questions = document.querySelectorAll('.overview-box__text').map((el) => JSON.parse(el.innerText));

How do I load multiple JSON files in javascript

I need to load multiple different JSON files.Now I use many AJAX to load them one by one, according to a list of their file name. But if I add a new JSON, I should change the list by myself. How can I load JSON files with code automatically?
solution 1:
A possible solution is to create a JSON file that contains all file names. Then you just have to update the JSON file instead of the list.
solution 2:
In the case where the file names are like file1.json, file2.json, ..., you can try to get them with a loop and leave it at the first AJAX resource not found exception.

Pushing to an array in a separate JSON file

Lets say I have a JSON file, with an array inside of that JSON file.
{
"users": ["288381238123", "12312123123"]
}
Now I want to push to that array, and I have that file required at the top
const userList = require('../rolecall.json');
Then I have some other code here, which is seemingly supposed to push to that array
const users = userList.users;
users.push('82313123');
Now when I check back to the JSON file, there is no addition to the array. Why is that? If anyone could help me, that would be great.
When you 'push' to the array in Javascript, you are only changing the Javascript object.
Edit: taking Lyon's comment into account
The short answer is, you can't change a file on the client machine using javascript. That would be a huge security issue (though it used to be possible, fun times).
However, you can ask the browser to display a save dialog asking the user whether they want to save the content of your json to a file.
Old answer
If you want to save the changes to a file located on the server, you need to send the informations to said server, preferably via a POST request.
A simple way to do it is to use Ajax requests.
You can use the JSON.stringify method to format your users object.
xhttp.send(JSON.stringify(users));
Then you can handle the request on the server. The way to do that depends on the language used (PHP, Ruby, Node, etc)
Observations :
You are pushing a element into a local array userList. If you want to update the rolecall.json file, you'll need to write back to that file.
Javascript (client side) has not functionality to create, edit etc.. files.You can do it in back-end side.
Workaround :
You got your json in userList constant variable. now you can push that element into the array and then write back to rolecall.json if you're manipulating it in your backend (ie.: NodeJs)
const userList = {
"users": ["288381238123", "12312123123"]
};
userList.users.push('82313123');
console.log(userList);
In node.js you can use the fs library.
fs = require('fs');
fs.writeFile('fileName.json', JSON.stringify(userList));

Protocol Buffer and WADL to JSON

I've Protocol buffer (protoBuf) files which has models (c# class) and WADL files which has functionality for the WebAPIs controllers (controllers and methods in xml format). Now, I want to convert both (protobuf and wadl) it to Json standard format in 1 file. This json can be used by swaggerUI, SoapUI or any other tool which take json. And, when one modifies the Json in Swagger then it must also update corresponding protobuf and wadl.(I know it seems lot of work here, any easy way?) Can any one please let me know, How do I make it?

extract the value of an array in an existing javascript file

I'm trying to convert values defined in a javascript file to a json file or extract those values to some other format that I can process with python. Does anyone know of a python library, node.js package or other method for doing this with a local file? I cannot use ajax or php for this task.
Context:
I have a javascript file called file.js, in which there are no functions, but a number of lengthy arrays defined in the following fashion:
var an_array1 = new Array();
an_array[1] = {some array values 1}
...
an_array[n] = {some array values n}
var another_array = new Array();
another_array[1] = {some other array values 1}
...
another_array[m] = {some other array values m}
No functions are included in this file, just the calls to var and the subsequent setting of the array values.
Similar questions provide answers that focus around using ajax or php, but I do not think I can use these tools for this purpose. I can, however, use node.js, python and any associated libraries/packages. I would also be game to try an awk/sed type script, but I don't think this will work here, since the data I want requires file.js to be parsed/processed first.
Ideal outcome
Ultimately, I'd like to use some method to process the file.js, extract the value of one particular array to its own file as JSON, or some other, similar format (XML would be fine too, even csv would work). e.g.:
file.json:
[{some array values 1},...,{some array values n}]
Does anyone know how this might be done? There are some questions similar to this, but those assume that I am querying a website or something, which is not the case here.
Here's a node file that could do this for you if the file.js file is structured to declare the desired variables at the top level. If that isn't the case, you will have to show us what exactly file.js looks like.
// load filesystem module
var fs = require("fs");
// read JS file and execute it
var data = fs.readFileSync("file.js", {encoding: "utf8"});
eval(data);
// write data out to files
fs.writeFile("result1.json", JSON.stringify(an_array1));
fs.writeFile("result2.json", JSON.stringify(an_array2));
You would then just run this JS file with node.js.
This would use the V8 JS interpreter in node to parse the JS file with your variables in it. It would then load the file system module and then write the JSON representation of two separate arrays out to files.
You can then write Python to read those files, parse the JSON into a form Python understands (Python has JSON parsing built-in) and then do whatever you want with the data in Python.

Categories