What is preventing JSFiddle from displaying this object?

I'm currently experimenting with objects in Angular.

While using JSFiddle to define some JSON objects in an Angular controller, I've encountered a problem - it's not working and I can't seem to figure out why. Can someone with fresh eyes or a sharper mind take a look and let me know what's wrong?

Check out the JSFiddle here

function MyCtrl($scope) {
    $scope.name = {
        "countries": {
            "usa": "washington",
                "canada": "ottawa",
                "netherlands": [
                "official": "amsterdam",
                "administrative": "The Hague"],
                "israel": "jerusalem"
        }
    };
}

Answer №1

Monitor your JavaScript console

Error: Unexpected token :

It seems like you are mixing up objects {} and arrays [].

Answer №2

Quentin pointed out the issue - I was mistakenly mixing up Arrays and Objects, even though I do know the distinction between them.

In the code snippet provided, I incorrectly used key:value notation within the array for netherlands. The correct format should have been:


        "netherlands": [
            {"official": "amsterdam"},
            {"administrative": "The Hague"}
        ],

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

Personalize the file button for uploading images

I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this? <input type="file" />, which renders a choose button with text that says `no files chosen` in the sa ...

Utilizing jq for tallying

When using jq-1.5 and given a JSON file like: [{... ,"sapm_score":40.776, ...} {..., "spam_score":17.376, ...} ...] Is there a way to determine the count of items where sapm_score > 40? - Regards, Dan Update: Upon examining the input file, it appea ...

Methods to retrieve an array's value list dynamically using the 'id' in Vuejs

**User.vue** <template> <div> <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div> </div> </template> <script> import { datalist } from "./datalist"; export default { name: "User ...

Can we invoke a function through Ajax?

Apologies for my lack of experience, I am just getting acquainted with Ajax. Please bear with me if my question seems unrefined. I attempted to do something, but unfortunately, I did not achieve success. Let me explain what I was trying to accomplish: I ...

Iterating through a JSON object using an API loop

Just starting out in JS and I am attempting to use a for loop to combine all the 'text' from various JSON objects into one cohesive paragraph. For example, it should read like this: "Hello, and welcome to the Minute Physics tutorial on basic Rock ...

How can I trigger a click event on a link using JQuery?

One of my links has the unique id: nyhedsklik There is a function associated with this link that activates when it is clicked: $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Fetching Popup ...

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

Categorizing information within a Python document

My document contains data in a specific structure: CC ----------------------------------------------------------------------- CC CC hgfsdh kjhsdt kjshdk CC CC ----------------------------------------------------------------------- CC Release of 18 ...

The function to refresh content is causing errors in the code

Creating a comment and replies form where the replies display underneath each comment. I've encountered an issue where I can post replies normally, but when attempting to delete a reply, I must refresh the page. After refreshing, I'm only able to ...

"Showing Off Your Steam Inventory on Your Website: A Step-by-

My goal is to display a user's specific inventory on a webpage. I've tried using the following link: but it hasn't been helpful. ...

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

I am currently utilizing HTML, Javascript, and bootstrap to develop a web application. However, I have encountered an obstacle. When using the code document.getElementById("input here"), it only returned an array of 0. My goal is to retrieve data from an A ...

In search of an effortless method to effortlessly select numerous elements using a handy bookmarklet

My goal is to develop a bookmarklet that can perform various functions on different webpages with ease. The concept involves placing it in a convenient location, such as the bookmark bar, and executing a "standard function" on a particular page. Instead of ...

What is the process for extracting HTML content using the JavaScript executor?

import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; public class WebDriverExample { public static void main(String[] args) { System.setProperty("webdriver.c ...

The Nuxt.js authentication module remains in place and does not redirect users who are already logged

An authenticated user can still access the /login page. If I click on a link to the /login page, I am redirected to a different page successfully. However, if I manually type in /login in the URL, I am still taken to the login page even though I am already ...

Guide on verifying the status of a switch toggle using Selenium and C#

I am having trouble verifying the current state of a switch ('on' or 'off') using selenium. The toggle appears in the 'on' position when the webpage loads, but it affects filter results in a table when switched off. I am unabl ...

Output the word 'Days', 'Months', or 'Years' depending on the value of N, which represents the number of days

I am currently utilizing moment.js in conjunction with vue 3. I've implemented a function that calculates the disparity between two dates. The functionality works as expected, but here's where my query comes in. The function is structured like so ...

Ways to retrieve all elements based on their class names?

What is the equivalent of using $('.class') in JQuery to get all elements by class name with pure JavaScript? ...

Encountering an error with NextJs & Strapi when utilizing the getStaticPaths functionality

Currently, my project involves using Strapi to develop a custom API and NextJs for the frontend. I am experimenting with utilizing getStaticPaths to generate pages based on different categories. In Strapi, I have set up a collection for categories that is ...

Tips for detecting when the MDC Snackbar has been closed using JavaScript

I'm currently working with Material Design's Snackbar in combination with VueJS. My goal is to detect when the snackbar has finished closing. The Snackbar object does have a property called isOpen, which allows me to check if the snackbar is ope ...