Incorporating a JSON file through a script element

A customized I18n plugin has been developed to accept various languages through json files. The goal is to simplify usage for users by allowing them to easily insert their json package directly into a page along with the script:

<script id="pop-language_es" type="application/json" src='languages/es.json'></script>
<script src='pop.js'></script>

To maintain the simplicity of this plugin, external dependencies like Jquery are avoided. The script tag can be retrieved using pure JavaScript:

var json = document.getElementById("pop-language_es");

However, the challenge lies in accessing the actual json content rather than just the tag itself. Is there a way to access the contents using something like json.content?

This issue has similarities to one discussed here, where suggestions of using Ajax were made. While Ajax could potentially solve the problem, it raises concerns about the client downloading the json file twice (once during page load and again during the Ajax call). This could be problematic especially for large json files.

Answer №1

To efficiently share data across files, consider creating a global variable in your external file:

window.sharedData = { ... };

Subsequently, reference this information in your other code using window.sharedData.

It is worth noting that there may be compatibility issues with parsing .json files in certain browsers, so changing the extension to .js could be necessary.

Answer №2

After you import your javascript file, you can interact with its data (variables, methods, etc.) from within your main code. document.getElementById specifically targets the DOM element and has no knowledge of the contents within the file itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to trigger a method once an image has completed loading and rendering?

Is there a way to trigger a method once an image has finished loading and displaying on the web browser? Here's a quick example using a large image: http://jsfiddle.net/2cLm4epv/ <img width="500px" src="http://www.digivill.net/~binary/wall-cover ...

Encountering a problem with integrating Vue js and making a jquery

Hello there! I'm currently working on fetching data through ajax and utilizing a vue wrapper component. Here's the code snippet I'm using: <html> <head> <title>title</title> <meta charset="UT ...

Populate a JSON table in React with checkboxes and automatically mark them based on the JSON data

I'm currently working on creating a React table using JSON data like this: [ { "Id_side": 123, "Name_side": "R4", "Name_cycle": "C1" }, { "Id_side": 345, "Name_side": "M1", "Name_cycle": "C2" ...

Executing multiple HTTP requests in parallel with AXIOS and retrieving the responses even if one of the requests fails

I am currently working on optimizing server get requests to run concurrently. To achieve this, I have developed the following function. Issue The problem arises when one request fails, causing me to lose track of the responses from the other requests. e ...

Get user input from a textbox and use that input to conduct a search on Google

Hi there, I'm currently working on solving this particular problem. I'm attempting to create a HTML page using a form where the user can input a keyword and click on the "Search" button to search for that keyword on Google. I haven't had a ...

AngularJS Perspectives: Unveiling the Secrets of Successful Implementation

Do you have any tips on troubleshooting AngularJS views? I found a demo at AngularJS: ngView, but the provided jsfiddle doesn't seem to work. I've been trying to play around with it, but still haven't had any success. This is the code I&apo ...

Tips for applying a custom design to your MUI V5 styled component

How do I customize the style of a button component in MUI V5? I've been trying to combine old methods with the new version, but it's not working as expected. import { Button } from "@mui/material"; import { styled } from "@mui/mate ...

How to effectively pass custom props or data to the Link component in Next JS

As I dive into Next JS, I've hit my first roadblock. Currently, I am working on a page that showcases various podcast episodes with preview cards on the homepage. The card component code looks like this: import React from 'react'; import Li ...

Is there a way to access the origin of an iframe?

I am facing a challenge with an HTML page that includes an iframe. Within the iframe, there are text and buttons that trigger onclick scripts. However, I'm having difficulty retrieving the values of getBoundingClientRect when I specify the ID of the b ...

Creating a new array set by utilizing the map method

How can I filter and return a new array using the map function based on 2 conditions: The array must not be empty The role should be "moderator" This is an example of my initial response: Below is a React function that utilizes the map method to proces ...

VSCode API alerts user when a rejected promise is left unhandled for more than a second

After working diligently on developing my first vscode extension, I encountered a roadblock when the debugger halted the execution of my extension. As a newcomer to JavaScript, I suspect that I may be overlooking something related to "thenables" that is c ...

Is there a way to allow users to edit all the input fields within the td elements when they click the edit button for a specific row?

I am completely new to web dev and I'm struggling with what should be a simple task. My goal is to enable editing of all inputs in a table row when the edit link is clicked. Since I am not using jQuery, I prefer a pure JavaScript solution if possible. ...

Retrieve the unique identifier of the dynamically created button

I have been struggling to retrieve the ID of a dynamically generated button. I attempted to access the specific button ID and utilize it for beforeSend:function(id). However, my efforts were not fruitful. <?php session_start(); require_once "../aut ...

Looping through data in AngularJS with duplicated entries

I'm having an issue with my AngularJS ng-repeat when trying to display JSON data. The records are duplicating, but only after reloading the page. Initially, everything works fine. Take a look at the JSON data below: [{ "EmployeeName": "Jishn ...

Babylon entities failing to run

Encountering a strange issue in my current project. I am working on a react application that incorporates Babylonjs for 3D rendering. While I am able to successfully load objects into the scene, I am facing a problem when attempting to create a PBR Materia ...

What steps can be taken to prevent a child component from re-rendering when the parent updates the context or state in React JS?

How can I prevent a child component from re-rendering when the parent updates the context or state in React JS? I have already implemented React.memo, but the component still re-renders. Below is my child component: const Ab = () => { console.log(&q ...

Decoding top-level JSON arrays in Go

Currently, I'm delving into Go by creating a basic http server and I find myself needing to manage JSON responses. When dealing with an object response, handling it idiomatically only requires 2 lines of code: structResult := Foo{} json.Unmar ...

Guide on adding data from Express.js and Node.js to a database

I'm dealing with a code that involves image uploads and handling input text. I am facing an issue in inserting these values into the mysql database. The problem arises when trying to insert multiple values into the database; however, I can successfull ...

Unable to smoothly animate object within OBJLoader

I'm a beginner in the world of Three JS and Tween JS, having recently picked it up for my project. However, I've encountered some frustration along the way. My main issue at the moment is trying to tween object1, amidst other objects like object2 ...

Center both vertically and horizontally in Bootstrap UI Modal

I'm attempting to create a Bootstrap UI Modal that is centered both vertically and horizontally. While I found this solution that successfully centers the modal vertically, it loses its horizontal centering when applied to my own template with 800px ...