Encountering issues with parsing a JSON list in AngularJS

Here is the JSON I am attempting to parse:

{[{"name":"Technology"},{"name":"Engineering"},{"name":"Business"}]}

I encountered the following error:

Unexpected token [ in JSON at position 1
    at JSON.parse (<anonymous>)
    at fromJson

The data is being retrieved from a service and stored in the controller's scope using the code below:

vm = this;
vm.sectorList = response.data;

This is how it is displayed in my HTML file:

<div ng-repeat="sector in ctrl.sectorList">
    {{sector.name}}
</div>
javascriptangularjsjson

Answer №1

The JSON data provided is not correctly formatted, which is causing the error message you are receiving. A key is missing for the JSON array value to be valid. Adding a key such as "anything" can resolve this issue:

{"anything": [{"name":"Science"},{"name":"Mathematics"},{"name":"Art"}]}

Answer №2

In the case that the response is in the form of an array, it should not be wrapped within curly brackets {}. A valid JSON representation would look like this: 

[{"name":"Technology"}, {"name":"Engineering"}, {"name":"Business"}]

Furthermore, attempting to apply JSON.parse on an object would result in an error, as this method requires a string input parameter. To convert an object into a JSON string, you should utilize JSON.stringify.

Answer №3

Uh oh, looks like your JSON is invalid. You can check its validity at this link

The correct format should be: 

[{
    "name": "Technology"
}, {
    "name": "Engineering"
}, {
    "name": "Business"
}]

Answer №4

In order to properly format your JSON, it is recommended that you omit the curly braces before the []:

[{"type":"Science"},{"type":"Mathematics"},{"type":"Art"}]

Answer №5

Looks like you're missing an important key.

{"ImportantKey": [{"category":"Technology"},{"category":"Engineering"},{"category":"Business"}]}

Remember, you need a key to access arrays within an object.

Answer №6

To properly utilize the array, you must assign it to a property within the object. You cannot simply place the array inside the object without a corresponding property.

{  
   "categories":[  
      {  
         "type":"Technology"
      },
      {  
         "type":"Engineering"
      },
      {  
         "type":"Business"
      }
   ]
}

When using ng-repeat, make sure to update the syntax as shown below:

<div ng-repeat="category in ctrl.categoryList.categories">
    {{category.type}}
</div>

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

After updating the name of an input control for validation, the ASP.NET validators are no longer functioning properly

Adding "runat=server" to an input control allows for ASP.NET validators to be specified, but it can create complications when dynamically adding rows with JavaScript. Each input control must follow a specific naming convention, like "inputControl_" + count ...

c#javascriptjqueryasp.net

JS values are completely out of sync

I am currently computing values, capturing them in a snapshot, and then sending them within an interval. However, the problem lies in the fact that the total sum is growing at an unexpectedly high rate. Here are the calculations being performed: // Ass ...

javascriptnode.js

Please send a JSON object to a PHP script for insertion into a MySQL database, but you might receive

I am trying to send a PHP request via a Java program and insert data into MySQL. I have successfully inserted the data using my browser, with no issues in the MySQL column. However, when I try to do it through Java, the column returns null. URL url = new ...

javaphpmysqljsonpost

Tips for sending a JSON string from PHP and parsing it in Java to obtain a POJO correctly

My PHP code uses json_encode to generate a JSON string with the SQL result stored in $result. $final_op=""; if(empty($result) == false){ $rows = array(); while($r = mysqli_fetch_assoc($result)) { $r ...

javaphpandroidjsonjsonexception

Utilizing Page Objects to select dropdown list items in JavaScript for Protractor testing

I'm struggling with a particular issue during my testing process. The task requires selecting an item from a list as part of a form to create a new user. However, the test does not select an item from the list even though Protractor does not report an ...

javascriptangularjsnode.jsprotractorpageobjects

Creating a framework for sharing data between directives using Angular services

In my project, I have developed two directives named "mainPane" and "sidePane" displaying lists of items. These lists often contain overlapping content, allowing users to interact with the items in either list. My main requirement is that any changes mad ...

javascriptangularjsoop

Despite creating a new array, Vuetify 2 continues to display 10 in the pagination options

I am facing an issue in Vuetify 2 where I have set the pagination options of a data table to be [50,60,70], but on the page, it displays [10,50,60,70]. It seems to be combining the default 10 into the list. https://codepen.io/anon/pen/NQRRzY?&editable ...

javascriptvue.jsvuetify.js

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss

Dynamic Visualizations with D3.js: Live Charts for Real-Time

This is my first time using D3.js and I am attempting to create a basic sparkline graph. The graph should have time on the X-axis and numbers up to 1000 on the Y-axis. I have a web socket server that sends random numbers up to 1000 to clients. My goal is t ...

javascriptjqueryangularjssvgd3.js

Hugo: Utilizing template variables within JavaScript files

Within my Hugo website, the baseUrl configuration is set to: website.com/variable. If an image element is present in a .html file (such as < img src="/images/image.png" >), the baseUrl is appended resulting in the final URL being: website. ...

javascripthtmlhugo

The server is showing a discrepancy in date comparisons with MomentJS

I am struggling with grouping events by day in my application. While it works correctly in the development environment (Brazil), on the server (USA) the events that occur at the end of the day are being placed at the beginning of the next day. I suspect th ...

javascriptnode.jsdatetimezonemomentjs

The Dependability of LocalStorage in Phonegap

I am currently developing a PhoneGap application that requires storing user data. The app will prompt the user to input a URL during the initial startup. Since URLs can be lengthy, I want to save it on the user's device to avoid the need for them to r ...

javascriptandroidiosmobilecordova

Can Squarespace extract JSON properties from a URL?

I've been learning about accessing JSON data and discovered that I can access it through this link . However, when I tried to access a specific property like news.items using this link , I encountered an error. Is there a way to navigate into the JSON ...

jsonsquarespace

The Axios response is coming back as a null value

//I utilized the context API to fetch data here const [allProfiles, setAllProfiles] = useState(""); const fetchAllProfiles = async () => { const res = await axios.get("http://localhost:5000/api/all-profiles"); setAllProfiles(res.data); }; ...

javascriptnode.jsreactjsaxiosnext.js

When attempting to use the .includes() method on a property within an array, I encountered an issue with a TypeError stating that .includes is not a function

I need help with filtering a group of activities based on the year they were carried out. Here is an example of the data structure: activities: [ { title: "Playing soccer at school", years: [2023,2024] }, { title: "Playing guitar at ...

javascriptreactjs

How to Verify if the Second Tab has Fully Loaded in Selenium Testing

Our current automation process involves using selenium. In order to open 2 URLs simultaneously, we have implemented the following approach: I use driver.get to load the first URL, which includes built-in synchronization for page loading. For the second wi ...

javascriptseleniumselenium-webdrivermicrosoft-edge

Implementing a method to pass on an incrementing index condition from one component to another using provide and inject in Vue.js

I attempted to enhance the tabsWrapper component by adding a button that, when clicked, selects the next tab. However, my code isn't functioning as expected despite using familiar patterns. My lack of understanding regarding slots, inject, and provide ...

javascriptvue.jsvue-componentvuejs3vue-composition-api

Why are the resources missing from my bower_component in the Gruntfile.js of my yo angular-fullstack build?

Working on my Yo Angular-Fullstack project, I encountered an issue with the angular-timezone-selector. The problem arises when trying to move the chosen-sprite.png image to the public/app/ directory during the grunt serve:dist process. It seems related to ...

angularjsgruntjsyo

Tips for updating process.version in a Node.js environment

After upgrading my node version from v3 to v11 using nvm with the command nvm use 11.12.0, I noticed that when I check the version using node -v in the terminal, it correctly shows 11.12.0. I also have a node js application that is started through pm2. I ...

javascriptnode.jsnpmpm2

What can be done to resolve the issue of 'this.state.*.map' not being a function

I am encountering an issue while trying to export a single row from my component import React, {Component} from 'react'; class TableRow extends Component { state = { row: [] }; componentWillMount() { this.setState({row: this.props.chil ...

javascriptreactjs