Working with JSON Objects in Java Script

I have a JSON object data in a JSP file and have passed this data to a JavaScript function through a hyperlink onclick method. The alert box displays properly, but the issue is that I want to extract the URLs in the JSON object and convert them into an array.

The actual data in the JavaScript function looks like this:

[Image{url='/images/HH/Images/US/NYC/NYC-MEL-1.jpg', description='Exterior', alt='null', sortOrder=1, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-9.jpg', description='Exterior', alt='null', sortOrder=1, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-11.jpg', description='Lobby', alt='null', sortOrder=4, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-5.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-6.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-7.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-8.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-10.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-3.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-2.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}, Image{url='/images/HH/Images/US/NYC/NYC-MEL-4.jpg', description='Guest Room', alt='null', sortOrder=34, externalUrl='null'}]

The above text contains a List of Image Objects that contain URLs, alt text, descriptions, and more.

I need a JavaScript solution to iterate through the URLs and convert them into an array.

Could you please suggest an answer for me?

Thanks, Ram Prasad G 08527960397

javajavascriptjson

Answer №1

The JSON string you provided is not valid. You will need to create your own parsing method to correctly extract the content.

Before calling JSON.parse(..) on the string, make sure to perform the following steps to convert it to valid JSON:

  1. Replace "Image{" with "{"
  2. Replace all instances of "=" with ":"

Answer №2

If you're looking to handle this task, my recommendation would be to utilize JQuery. You can refer to the following link for assistance: http://api.jquery.com/jQuery.parseJSON/. While looping through the Images, you have the flexibility to perform various operations, such as creating an array with them.

UPDATE

Additionally, as many have pointed out, your input lacks the JSON format in the question. Assuming you have data generated through jsp (java), it would be beneficial to first convert it from POJO to JSON on the server side. This JSON data can then be easily read and parsed on the client side using javascript.

To generate JSON on the server side, I recommend using Jackson. You can find a helpful example at:

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

I possess a pair of items that require merging together while combining any overlapping key values in their properties

I have a scenario where I need to merge two objects and concatenate strings if they have the same key. obj1 = { name: 'John', address: 'Cairo' } obj2 = { num : '1', address: 'Egypt' } After merging, the r ...

javascriptangulartypescriptecmascript-6lodash

Creating a Map in TypeScript from an Array

I have a series of TypeScript objects structured like this: interface MyObject { id: string, position: number } My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON ...

javascriptarraysjsontypescriptecmascript-6

The jQuery calls fail to execute in the update panel

My update panel is set to refresh every 1 minute. Within the panel, there are two input fields. When I click on each one, a datepicker function is triggered. Here are the scripts included for the datepicker: <link rel="stylesheet" href="http://code.jq ...

javascriptjqueryasp.netdatepickerupdatepanel

Show the result as "Content-Type: image/jpeg" on the webpage

I have a URL for an API request that automatically downloads and saves a QR code image from the browser. The Content-Type of the URL is application/jpeg, and its format looks like this: application(websiteURL)/egs?cmd=gen_qrcode&customer_id=123&n ...

javascriptapivue.js

The filtering and sorting features of Ng-table do not seem to be working properly when dealing with grouped data

Currently, I am in the process of learning angular.js and have recently started using the ng-table directive. While I have successfully managed to group my data and display it using ng-table, I seem to be facing issues with sorting and filtering the data. ...

javascriptangularjsngtable

Opt for employing a JavaScript variable over a JSON file

Let's start with a declaration: <div id="timeline-embed"></div> <script type="text/javascript"> var timeline_config = { width: "100%", height: "100%", debug: true, rows: 2, ...

javascriptjqueryjson

Replacing strings using Regex capture groups in JavaScript

Within my NodeJS application, there is a phone number field containing multiple phone numbers stored in one string. For example: \n\n \n (555) 555-5555 (Main)\n\n, \n\n \n (777) 777-777 (Domestic Fax)\n&bso ...

javascriptnode.jsregex

Leveraging Reads, Writes, and Formats within the Play framework

In my Play! application, I have models that need to be serialized/deserialized to JSON. Rather than using separate methods for this, I've learned that it's preferred to provide an implicit instance of Formats[T] or Reads[T], like so: import play ...

jsonscalavalidationplayframeworkplayframework-json

How can I fix the position of the close button when using the paper component of a modal in material ui to ensure responsiveness on the screen

I recently created a cards page where multiple cards are displayed. Each card opens a modal component when clicked, but unfortunately, the close button is not functioning properly. Here's an image showing the issue with the button's position whe ...

javascriptcssreactjsreact-hooksmaterial-ui

When utilizing VueJs, it's not possible to retrieve a data property from within a function

I am encountering a challenge when trying to access the data property within the function. Despite my efforts, I seem to be missing something crucial and unable to pinpoint what it is. Here is my class: export default { name: "Contact", component ...

javascriptvue.jsvuejs2

The error message states: "TypeError: a.map is not a function"

I recently deployed my React JS app on Heroku and encountered some issues with the routing. While everything worked smoothly on my local host, I faced errors after fixing the routing problem that I couldn't resolve. Despite extensive research, I haven ...

javascriptnode.jsreactjsmongodbexpress

JavaScript refuses to execute

I am facing an issue with a static page that I am using. The page consists of HTML, CSS, and JavaScript files. I came across this design on a website (http://codepen.io/eode9/pen/wyaDr) and decided to replicate it by merging the files into one HTML page. H ...

javascriptjquerylinker

Tips for including multiple JSON results into a single text box for auto-complete purposes

I am trying to combine different autocomplete list results into one text box. It's straightforward to use separate text boxes for different autocomplete results. HTML: <input id="university" name="university" type="text" /> <input id="unive ...

javascriptjqueryjsonjquery-autocomplete

Executing a <SCRIPT> within an Ajax-loaded webpage

Utilizing Framework7 for my web application has been great since it allows me to load pages using Ajax, giving it an app-like feel. However, I am facing a challenge with making the "ad" code display properly on Ajax-loaded pages. If you inspect the ad co ...

javascriptjqueryajaxhtml-framework-7

The useRouter() function doesn't seem to be successfully navigating to the main landing page

"use client" import { useState } from 'react'; import {auth} from '../../firebase-config' import {createUserWithEmailAndPassword} from 'firebase/auth' import { useRouter } from 'next/router'; const SignUp = ...

javascriptfirebasenext.jsfirebase-authentication

Save data in JSON format to a text file while preserving the formatting

My dataset is formatted in JSON, for example: {"rand":"7542868","action":"get","identity":{"name":"Jack","password":"secret"},"key":"o8sh769f79"} and I have the knowledge to decode it. However, I am struggling with converting it into a txt file that looks ...

phpjsonformatting

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

javascriptcssreactjsreact-dnd

How can we use JavaScript to add a class to the <html> element?

What is the method to apply a class to the root element <html> in JavaScript? ...

javascripthtml

Issue with useState in Next.js when fetching data from an API

When attempting to retrieve data from the API, I am receiving a response. However, when trying to set the data to useState using the setAccessData function, the data is not being accessed properly. Despite trying multiple methods, the data continues to sho ...

javascriptreactjsnext.js

Search for elements within the database by using the recursive feature of M

I am working on a search query to retrieve 'n' number of videos from a collection. The user has primary, secondary, and tertiary language preferences (Tamil(P), Hindi(S), English(T)). My goal is to first search for videos in the primary language, ...

javascriptnode.jsmongodbmongoose