Guide to reading a JSON file containing JavaScript code in an Angular.js application

[{
    "title" : "Material of the product (indicate the composition or blend ratio of the fabric as a percentage, for functional products include performance or approval certificate) Example: Polyester-75%",
    "detail" : [
      {
        "code" : "0101_0",
        "title" : "Material of the product",
        "html" : $sce.trustAsHtml("<input type='text' class='form-control' ng-model='details.value'>"),
        "value" : ""
      },
      {
        "code" : "0101_1",
        "title" : "Functionality",
        "html" : $sce.trustAsHtml("<label class='radio-inline'><input type='radio' name='prod' ng-value='Y' ng-model='details.value'>Target Product</label>" +
        "<label class='radio-inline'><input type='radio' name='prod' ng-value='N' ng-model='details.value'>Not Target Product</label>"),
        "value" : ""
      }]}]

Above is a snippet from a Json file that I am attempting to utilize in an angular.js application.

$http.get('/views/online/product/json/01.json').success(function(data) {
  $scope.prod_info = data;
}).catch(function (err){
  console.log(err)
})

However, I encountered an error because the json file contains JavaScript syntax such as '+' and the $sce.trustAsHtml method.

What is the best way to read a json file with JavaScript language content in angular?

Answer №1

There seems to be an issue with the JSON located at

/views/online/product/json/01.json
.

In order for AngularJS to load it properly (without response interceptor), the JSON must be valid. You can validate your JSON by visiting

Please make the following corrections:

[{
    "title": "Material of the product...",
    "detail": [{
        "code": "0101_0",
        "title": "Material of the product",
        "html": "<input type='text' class='form-control' ng-model='details.value'>",
        "value": ""
    }, {
        "code": "0101_1",
        "title": "Functionality",
        "html": "<label class='radio-inline'><input type='radio' name='prod' ng-value='Y' ng-model='details.value'>Target Product</label><label class='radio-inline'><input type='radio' name='prod' ng-value='N' ng-model='details.value'>Not a Target</label>",
        "value": ""
    }]
}]

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

Redirecting files from the file system to the emulator is not functioning properly

I am new to Phonegap and need help resolving this issue. In my application, I need to redirect to the List.html file when a button is clicked. Here is the code I have written: button1 function test() { window.location="/home/swift-03/phonegapexa ...

Converting a JSON object to a class in ASP.NET MVC - A step-by-step guide

Having trouble converting the JSON object below to a class in Asp.Net MVC. { "Name.Test":"fsafasfda" } If you have any suggestions, they are greatly appreciated. The situation is as follows in an ASP.NET action: [HttpPut] public JsonResult Te ...

Issue with Chrome Extension's Local Storage Functionality is Causing Errors

Currently, I am in the process of developing a Chrome extension that utilizes a content script to make modifications on specific sections of a website. Everything was functioning smoothly until I decided to incorporate an options page into my extension. M ...

Performing an HTTP request to itself in NodeJS/ExpressJS

Currently coding an NPM module that requires making an HTTP request to itself, which is the running web server. Here's an example: let url = "http://127.0.0.1:" + (process.env.PORT || 3000) + path; request(url, function(error, response, body){ ... ...

I am looking for information on how to properly handle HTTP errors in Axios when utilizing a blob responseType in VueJs

Using the blob responseType with Axios in my VueJS app allows me to download a document from the server. Everything works fine when the response code is 200, but problems arise when there's an HTTP error. I find it challenging to read the status code ...

Guide on sharing Photo Blogs on Tumblr using the "tumblr.js" NodeJS module

I've been using the tumblr.js node module to interact with the Tumblr API, but I'm having trouble understanding what exactly should be included in the "options" when posting on my blog. So far, I've only used this module to retrieve my follo ...

Memory leaks are occurring due to the texture from the video tag

Currently, I am working on creating a texture in THREE.js (r78) from a video tag and updating the texture 60 times per second by setting needsupdate=true in requestanimationframe. However, I am facing a problem where I notice memory leakage in the Chrome T ...

Utilizing an external JavaScript file for developing applications on Facebook

I am looking to incorporate external JavaScript into my Facebook application development. Specifically, I am hoping to utilize the Ajax tab feature in my application. ...

Looking to transfer a multimap from Java to JavaScript using JSON

Seeking advice on the most effective way to transfer multimap values from Java to JavaScript in JSON format. In addition to utilizing an object with a key field and an ArrayList, are there alternative methods I could consider for sending multimap values ...

Tips for getting the jQuery accordion to return smoothly to its original position (instead of stacking on top of each other)

I'm a complete beginner at this and could really use some assistance. Here's my JS Fiddle: http://jsfiddle.net/hAZR7/ The problem I'm facing seems to be more related to logic or math, as the animation works fine when starting and moving to ...

Using regular expressions to identify the presence of "&", parentheses, and consecutive letters in a string

I specialize in working with JavaScript and I have a need to verify if my text contains certain characters. Specifically, I want to check for the presence of parentheses (), ampersands (&), and repeating letters within the text. Here are some examples: te ...

Is there a way to detect when a user has recently updated their Chrome Extension in order to send them notifications?

I have implemented an info button in my extension, where a red dot appears on the top right corner to alert users of new updates whenever they update the extension. Currently, I achieve this by storing a row in localStorage when users view the updates. If ...

The JSON schema counterpart to the keyref feature in XML schema

I need to design a JSON schema for data structured like the example below: { "equipments": { "A": {}, "B": {} }, "work": [ { "equipment": "A" } ] } Currently, my schem ...

Rails application experiencing difficulties in displaying the Raty JS plugin

Encountering issues with the raty js plugin while working on Rails version 5.0. jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761 Uncaught ReferenceError: jQuery is not defined at jquery.raty.self-628421be ...

Determining the availability of a remote source in React: A step-by-step guide

Is there a way to verify the existence of a remote resource, such as a large zip file, without actually downloading the file? What is the most efficient method for checking the presence of the resource? ...

Can you explain the meaning behind this specific AngularJS declaration?

I am currently immersed in the book Angularjs, which highlights the process of Angular traversing the template to identify directives and bindings. This then leads to the registration of listeners, DOM manipulation, and acquiring initial data from the serv ...

Basic parallax application, failing to achieve the desired impact

My goal is to create a scrolling effect where the header text moves down slightly, adding some margin on top to keep it in view. I found the perfect example of what I want to achieve with the header text at this website: After spending hours working on i ...

Exploring the Power of JQuery and Iterating with For-

I'm currently facing a small issue with my code. I need to retrieve information about each module when I display the hidden table row. The information is fetched from the page {modules/$moduleid}. While I understand how to utilize AJAX, my challenge l ...

Unusual actions from the jQuery Steps extension

I am currently utilizing the jQuery Steps plugin (FIND IT HERE). The issue I'm facing lies within an IF statement that is causing the wizard to return to the first step instead of staying on the current indexed step. While all other IF statements are ...

Animating elements in AngularJS with Animate.css's ng-hide function

Currently, I am in the process of learning and experimenting with Angularjs along with animate.css. My goal is to incorporate animations that trigger when ng-show changes from true to false. Although the showing and hiding functionalities are operational, ...