The JSON data script is not functioning properly

Is this JSON formatted correctly? Why is it not displaying in the element with #id? I found a similar code snippet on https://www.sitepoint.com/colors-json-example/, copied and replaced the values but it's not functioning. Can anyone shed some light on this issue?

<p id="demo"></p>

<script>
{
 "standing": [

{"code" : "G", "rank" : "1"},
{"code" : "I", "rank" : "2"},
{"code" : "M", "rank" : "3"},
{"code" : "X", "rank" : "4"},
{"code" : "A", "rank" : "5"},
{"code" : "B", "rank" : "6"},
{"code" : "C", "rank" : "7"},
{"code" : "D", "rank" : "8"},
{"code" : "E", "rank" : "9"}

]
}   

document.getElementById("demo").innerHTML =
standing.code + " " + standing.rank;
</script>
javascriptjson

Answer №1

Confused about your goal here? Try this script to change the letter or use a for loop to cycle through all letters:

<p id="output"></p>

<script>
var alphabet = [
{"letter" : "H", "position" : "1"},
{"letter" : "J", "position" : "2"},
{"letter" : "N", "position" : "3"},
{"letter" : "Z", "position" : "4"},
{"letter" : "B", "position" : "5"},
//and so on
];

document.getElementById("output").innerHTML = alphabet[0].letter + " " + alphabet[0].position;
</script>

The issues with your code:

  • You forgot to assign the array to a variable

  • You didn't specify which index to display

Answer №2

In order to refer back to the object later, you must assign it to a variable:

<script>
var position =  [

 {"letter" : "A", "position" : "1"},
 {"letter" : "B", "position" : "2"},
 {"letter" : "C", "position" : "3"},
 // etc/
]

document.getElementById("data").innerHTML =
position[0].letter + " " + position[0].position;
</script>

Now position is an array of objects that can be accessed using position[index].

Answer №3

"upright" is a collection that includes various elements. The initial element can be retrieved by using upright[0].key. I trust this information proves useful to you.

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

Vue Dev Tools is not updating data in Ionic Vue 3

There seems to be an issue with the updating of Reactive and Ref data in Vue Dev Tools when changes are made in an input field bound with v-model within a form. The updated data is only visible when I interact with another component and then return to the ...

javascriptvue.jsionic-frameworkionic2vuejs3

Trouble in displaying Android ListView while fetching data from JSON server

Currently, I am facing an issue with an Android app that is using a ListView to display data fetched from a JSON server. The view contains three fields: IMAGE, NAME, and DESCRIPTION. Despite confirming that the data is retrieved from the server and set in ...

androidjsonlistviewandroid-listview

Trying to call the Wia class constructor without using the 'new' keyword will result in a TypeError

I'm having trouble running my code from a JSON file, as it's throwing this error message at me: TypeError: Class constructor Wia cannot be invoked without 'new'at Object. (/home/pi/wia-pi-camera/run-camera.js:3:25) 'use strict&apos ...

javascriptnode.jsjsonterminalraspberry-pi

What is the most efficient method for creating and adding an element in jQuery?

When it comes to appending div elements to a page, there are different approaches that can be taken. Let's explore two methods: $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'>&l ...

javascriptjqueryhtml

Is it possible to assign binary content to the src attribute of an img, audio, or video tag?

Picture this scenario: I send an ajax request to my PHP server with the name of an image file, and the server is restricted from sending a direct link to the file. Instead, it must send the file contents using PHP's readfile(); function. Now, when thi ...

javascriptsrc

Guide on detecting and capturing a change in location history event

My main goal is to capture router change events outside of the NextJS framework, not within it. The application I have developed using NextJS includes some code that operates independently of the NextJS context. This code needs to be able to detect navigat ...

javascriptnext.js

The $POST method is failing to update the information

I've encountered an issue with my script that I can't seem to figure out. After numerous tests, it seems like the main problem lies within the Ajax request. Interestingly, I have used the Ajax request successfully in a previous version of my scri ...

phpjavascriptjqueryajaxajax-request

What is the best way to eliminate additional values depending on the one I have chosen?

When utilizing the Vuetify v-autocomplete component with the multiple prop, we are able to select multiple values. How can I deselect other values based on the value I have selected? For instance: If I choose the main value, all others will be deselecte ...

javascriptvue.jsvuetify.js

How can I design a tooltip window using HTML, jQuery, or other elements to create a box-like effect?

As someone who is new to front end development, I am facing a challenge with my web app. The requirement is that when a user hovers over an image, I need a 'box' to open nearby and display a pie chart. Although I have managed to get the hover fu ...

javascriptjqueryhtmlweb-frontend

Setting a default value in ng-options can be accomplished by using the ng-init

One way to set a dropdown list with a default value in AngularJS is by using the following code: <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init="repeatSelect = data[0].id"> <option ng-repeat="option in data" val ...

javascriptangularjshtml-selectng-options

Using the spread operator to pass properties in React

Update: After delving deep into the documentation, @wawka has discovered that there may be some issues with the react-router-dom v^5.0.1 causing problems with the myLink2 component. It seems like a rewrite of this component may be necessary. In my React p ...

javascriptreactjsreact-props

Quick way to specify type for Observable in Typescript

Exploring Shortcut Declarations When working with TypeScript, I often take a shortcut when declaring object shapes. Instead of creating an interface first and then specifying that the object conforms to that type, I simply do: object: { fizz: boolean, buz ...

javascripttypescript

ng-include failing to retrieve file name containing UTF-8 character

I encountered an issue with the ng-include directive in the code snippet below. The file name it's trying to access contains a special character, specifically an ñ, resulting in a not found error being displayed. <div ng-include="'{{mainCtrl ...

javascriptangularjsutf-8decodeuricomponent

Initial Search Function in a MEAN Stack Site

Working on a MEAN stack application for a school project, I'm almost done but struggling to add search functionality. Creating a search feature for ICD-10 codes in a medical app is my goal. Just need a basic search of symptoms or codes that displays ...

javascriptsolrlucenesearch-enginemean-stack

Trouble with two dropdown selections in Angular and preset values

I am encountering an issue with a select input in angular 7. The scenario involves having 2 selects where selecting an option in the second select populates the corresponding values in the first select. The first select should display a default placeholder ...

javascriptangularfrontend

Exploring the process of acquiring a button using refs in external JavaScript

Having encountered a situation where I have two different javascript files, I came across an issue. The first file contains a finish button that was initialized by using refs. Now, I need to access this button in the second file using refs. The code snipp ...

javascriptextjs

Waiting for the execution of JavaScript in Selenium-Webdriver is essential for ensuring the

Currently, I am utilizing selenium-webdriver in nodeJS instead of Java. My issue lies with using this.getPageSource(), as it returns HTML without waiting for the execution of JavaScript. Consequently, some elements that are loaded by JS do not appear in t ...

javascriptseleniumselenium-webdriver

Client component in Next.js is automatically updated upon successful login

I am currently working on a Next.js + DRF website that requires authentication. I have set up my navbar to display either a "log in" or "log out" button based on a boolean prop passed from the server side to the client-side: export default async function R ...

javascriptnext.js

How can I create a new PHP table using data from an existing table?

I have a table displayed on my website with the code snippet providedview the table image here Here is the code for generating this table: <?php $query = $db->query("SELECT * FROM bit_exchanges ORDER BY id DESC LIMIT 20"); if($query-> ...

javascriptphpjqueryhtmlmysql

Unexpected background image slideshow appearance

I am encountering an issue with my slideshow where the last image briefly appears before the first image loads in a continuous loop. The offset of the initial image causes it to start at the middle of the window, and in Google Chrome and Safari, subsequent ...

javascripthtmlcss