Exploring JSON parsing in AngularJS without running into reserved keywords

var jsonURL='../../json/xx.json'

var myApp = angular.module('myApp',[]);

myApp.controller('loaddata_traceroute', ['$scope','$http',function($scope, $http){

  $http.get(jsonURL).success(function(data) {
    $scope.datapoints_traceroute = data[0].abc[0].base-uri;
  })
}]);

The code snippet above is used to parse JSON data successfully. However, when attempting to extract the ".base-uri" property from the data, an error occurs with the message "ReferenceError: uri is not defined". This could be due to a reserved keyword causing issues.

Are there any alternative solutions or workarounds to address this problem?

Answer №1

To access values, always remember to enclose them in square brackets:

data[0].abc[0]['base-uri'];

This unconventional method is used when properties do not follow the standard format.

Answer №2

Experiment...

$http.fetch(jsonURL).done(function(result) {
    $scope.traceroute_datapoints = result[0].abc[0]['base-uri'];
});

To retrieve values from parameters with hyphens, always remember to use square brackets and enclose the name in quotes.

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

Creating a step wizard form with ReactJs can be accomplished by breaking down the form into

I have developed a resume generation application with two main components: BasicDetails and EmploymentDetails. To see a working example, click here: https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8 index.js file: <form onSubmit={ha ...

Having difficulty retrieving objects within a foreach loop of object keys that do not meet the criteria of the string.prototype.replace method

Currently, I am working on looping over objects within a key:value array in JavaScript to use the string.prototype.replace method for paths to JS files in GulpJS concat tasks. The objective is to generate a list of paths that GULP can utilize, but they re ...

What is the best method for toggling a class to indicate the active tab in VueJS?

My goal is to set the active class on the first <li> tab by default, and then switch it to the second <li> tab when selected. I plan to use CSS to visually indicate which tab is currently active. If you would like to see the current output, ch ...

Using AngularJS to dynamically populate a dropdown menu from a JSON object

I am a beginner to Angular and currently facing my first significant challenge. The JSON object below is the address data retrieved from a third-party API and added to $scope.AddressData in a controller: $scope.AddressData = [{ "Address1":"South Row", ...

What are the benefits of declaring variables with JSON in a JavaScript file instead of simply reading JSON data?

Lately, I've been delving into the world of leaflets and exploring various plugins. Some of the plugins I've come across (like Leaflet.markercluster) utilize JSON to map out points. However, instead of directly using the JSON stream or a JSON fi ...

bootstrap 4 - logo in navbar brand stays the same even when scrolling

I integrated Bootstrap 4 and successfully created a navbar. However, I am encountering a conflict when trying to change the navbar logo upon scrolling down. Despite my efforts, it is not functioning as expected. Does anyone know how to resolve this issue? ...

What is the best way to deactivate a submit button while an AJAX request is underway, and then reactivate it once a successful AJAX response is

I am working with the following HTML code: <form action="view_rebate_master.php" method="post"> <div class="form-group"> <label for="company_name" class="col-lg-12">Manufacturer</label> <div class="col-lg-12"> ...

Tips for including items in a list nested within a dictionary using JavaScript

I'm currently working with a JavaScript dictionary and I need to insert an element into a list that belongs to a specific key within the dictionary. Check out the code snippet below: lines = [ [1,2], [2,4], [2,3], [3,5] ]; nodes = [ ...

There is an error in the TypeScript code where it is not possible to assign a string or

I'm struggling to resolve a typescript error. Upon checking the console log, I noticed that the regions returned by Set are an array of strings, which aligns perfectly with the region type in my state. Why isn't this setup working as expected? S ...

What is the best method for preserving HTML content using Ajax?

I am having difficulty storing HTML code in a database using AJAX. Despite having the correct connection information, I am unable to write to the table. <div id="others"> <div id="name"><input type="text" name="results" class="name"> ...

Adding new data to a Chart.js line graph in vue on form submission - A step-by-step guide

I'm struggling with dynamically updating my line chart with new data. I want the chart to refresh every time a user submits a form with new data. Currently, I can add new data to the datasets array in the data function of App.vue, but the chart doesn& ...

Understanding Java and JavaScript variables within a JSP webpage

I am currently working on populating a pie chart from Google with data fetched from my database. Although I have successfully retrieved the desired results in my result set, I am facing challenges in converting my Java variables into JavaScript variables ...

Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

Here is a sample: http://jsfiddle.net/c3shonu7/1/ The code demonstrates the creation of a BufferGeometry object by cloning an IcosahedronBufferGeometry's vertices. The goal is to apply a color gradient to the subdivided icosahedron, with lighter shad ...

Retrieve the main key and its corresponding data from a cumbersome JSON file by utilizing streaming processes

As part of a system process, one step involves isolating a specific key and its corresponding value from a JSON file and saving it to a separate file for further processing in an unrelated script. An example subset of the original JSON file is as follows: ...

Oops! The regular expression flag "ajax" in Javascript is not valid and is causing

This is my function: public ActionResult RetrieveData(int id) { string name = "Jane"; return Json( new {result=name}); } I'm attempting to fetch information from this function using the code below, but I keep getting errors. Could y ...

Tips for submitting multiple radio button values in a tabular format

HTML Code: <div class="tab"><h4>Zip Code</h4> <p><input type="text" class="text1" placeholder="Enter zip code..." oninput="this.className = ''" name="zipcode"></p> </div> <div class="tab">& ...

Tips for seamlessly transitioning <img src="..." /> using jQuery?

Currently, I am working on the following code snippet: $img.hover(function(){$(this).attr('src','1.jpg')},function(){$(this).attr('src','2.jpg')}); However, this is not providing a smooth transition as it takes a c ...

Trigger the ASP .NET OnCheckedChange server event using JavaScript

One issue I encountered is related to a checkbox with an OnCheckedChanged event. Occasionally, I modify the checked status of the checkbox using javascript. However, when this occurs, the OnCheckedChanged event does not trigger. Is there any method to ens ...

The file type stored in Firebase storage is identified as 'octet-stream' rather than the expected 'png/jpg' format

I am experiencing an issue with uploading images to Firebase storage. After uploading them, I notice that they are labeled as application/octet-stream instead of the expected types like image/jpeg or image/png. Below is the code snippet I am using: <in ...

Guide on activating an event when a slider image is updated using jquery

I am working on a project that includes a slider. I have been trying to trigger an event when the slider image changes, but so far using the classChange Event has not been successful. Here is the link to my code: [1] https://codepen.io/anon/pen/gzLYaO ...