Extracting data from JSON format using JavaScript

I'm struggling with parsing JavaScript. I am trying to extract the value of "title" and "permalink", as well as the value of "basename" labeled "image_01". The desired output is 

http://blog.url/news/images/201516.jpg

<div id="placeholder"></div>
<script>
var data={
   "items": [
      {
         "title": "HELLO THIS IS TITLE",
         "customFields": [
            {
               "basename": "image_01",
               "value": "<form mt:asset-id=\"352706\" class=\"mt-enclosure mt-enclosure-image\" style=\"display: inline;\"><a href=\"http://blog.url/news/images/201516.jpg\">201516.jpg<\/a><\/form>"
            },
            {  
               "basename":"image_02",
               "value":"<form mt:asset-id=\"352705\" class=\"mt-enclosure mt-enclosure-image\" style=\"display: inline;\"><a href=\"http://blog.url/news/images/201516.jpg\">201517.jpg<\/a><\/form>"
            },
            {  
               "basename":"image_03",
               "value":""
            },
         ],
         "permalink": "http://blog.com/index.php"
      }
   ]
}

document.getElementById("placeholder").innerHTML=data.items[0].title + " " + data.items[0].permalink+"--"+ data.items[0].customFields[0].basename[0].image_01;
    </script>

http://jsfiddle.net/v57s2csa/3/

javascriptjson

Answer №1

  1. Don't try to access basename using basename[0] because it is not an array.
  2. The property "image_01" does not exist.

Instead of customFields[0].basename[0].image_01, use the customFields[0].value property which contains the image path labeled as "image_01".

Update the content inside the element with id "placeholder" to display: data.items[0].title + " " + data.items[0].permalink + "--" + data.items[0].customFields[0].value;

Answer №2

Agreed with @Kanti's response, but it could use more details:

Retrieve and display the title, permalink, and base name from the first item in the 'data' array using this JavaScript code: document.getElementById("placeholder").innerHTML=data.items[0].title + " " + data.items[0].permalink+"--"+ data.items[0].customFields[0].basename;

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

What could be causing the controller to malfunction when the script is placed outside of the index.html file?

I find myself caught up in a dilemma. Whenever I attempt to replicate the tutorial from , by copying and pasting the code below: <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/a ...

javascriptangularjsangularjs-controller

Is there a way to harness the getUserMedia() API in Node.js for seamless real-time media streaming?

Discovering how to capture video and audio directly in my web browser was surprisingly easy after a quick online search. I found a basic example that successfully demonstrated video and audio playback: navigator.getUserMedia = (navigator.getUserMedia || ...

javascriptnode.jsaudiovideo

Incorporating Angular JS services into your applications

As a beginner in AngularJS, I am facing a challenge in one of my applications where I need to integrate data from different services into my view. I am considering two approaches: Directly making ajax calls to the service URLs using the $http service i ...

javascriptangularjsservice

Change a JSON format with a JOLT transformation

Information JSON { "zone_name": "01 green", "zone_type_name": "Green", "conditions": { "timestamp": "2024-05-15 10:23:52", "num_samples": 12, "img_extent ...

jsonapache-nifijolt

What steps can be taken to avoid the destruction of an object following its use of the .load() function in JavaScript (specifically in three.js)?

I'm facing an issue with preventing the destruction of my object after loading it. var loader = new THREE.ColladaLoader(); var rescue; loader.load( 'Improved_Person_Maker_better_quality.dae', function(collada) { scene.add(co ...

javascriptscopethree.js

Remove a row from X-editable after confirming (AngularJS)

I recently added a confirmation feature to the delete button, but I'm facing an issue where the row is not getting removed even though the code seems to be working fine. HTML <button class="btn btn-danger" confirmed-click="removeUser($index)" ng- ...

javascriptangularjsx-editable

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

I'm facing an issue with the loading time of a Facebook post on my webpage index.php. The current method of using the embedded post provided by Facebook is taking too long to load. My solution is to create a separate page, post.php, where only the Fac ...

javascriptphphtmlcssiframe

Download button on Rshiny platform for collecting numerous files from different sources

I am on a quest for knowledge regarding the inclusion of a download button in my application that consolidates various files into a zip archive. Within my application, there are a timeline and a datatable, with files linked to entries on the datatable. Th ...

javascriptrshiny

I am interested in dynamically updating the position of a Google Marker using a loop or some other method

Exploring the wonders of the Google API, I am eager to find a way to automatically update the position of a Google Marker on a map every five seconds without having to store latitude and longitude in a database. Essentially, I aim to have the marker relo ...

javascriptlaravelgoogle-maps-markers

How can I successfully submit a page without refreshing using OTP?

When I fill in the information and try to send the OTP, the website reloads. Here is the link to the website: If you fill in the information and click on "Request verification code," you will understand what I mean. What I attempted was: $(function () { ...

javascriptjqueryajaxtampermonkey

Using input masking to restrict user input to only numbers and English alphabet characters

My input field is masked as "999999999" and functions correctly with an English keyboard. However, I am able to enter Japanese/Chinese characters into it, which breaks the masking. Is there a way to limit input to English keyboard numerics only? <inpu ...

javascriptjqueryhtmlmaskinginput-mask

The simultaneous loading of ng-include and ng-view is not supported

I have a simple app structure consisting of headers, footers, and ng-view on the homepage. When I enter the page, I notice that the two ng-include files load first, followed by the ng-view which pushes the footer to the bottom. This causes a brief flashing ...

javascripthtmlcssangularjs

Choose an image file to be uploaded for testing in Nightwatch on CircleCI

Currently, I am utilizing Nightwatch.js tests with test runs on a docker container in CircleCi. During the Nightwatch test on CircleCi, I am facing the challenge of uploading an image from the file system to my service. After some research, I came across ...

javascriptseleniumdockernightwatch.jscircleci

Trouble displaying static files in Angular/Express app on Heroku, while they are functioning as expected on local environment

After deploying to Heroku, I noticed that the css and javascript files in the 'public' directory were missing, resulting in 404 errors. Strangely, these files exist locally without any issues. In my app.js file, I have included the following: a ...

javascriptangularjsnode.jsexpressheroku

I am seeking advice on how to incorporate filters for categories in a GET request using JSON and Node in Swift

My main goal is to categorize a full json array into three categories. Let me demonstrate what I mean: var menu = [ { id: "coffee", name: "Espresso", description: "", image: '' }, { id: "coffe ...

jsonnode.jsswiftalamofire

Utilizing Laravel to structure nested JSON responses

I am trying to generate a JSON structure similar to this example in my API controller within Laravel. Below is the snippet of the controller: $data = []; foreach ($products as $p => $product) { // Code logic here } if (count($data) == 1) { $da ...

jsonlaravel

Express string declaration in a single TypeScript line

const restrictString = (str: string): string => str.match(/[ab]/g)?.join('') || '' Is there a way to restrict a string to only contain the characters 'a' and 'b' in a one-liner function? I am aware that this can ...

javascripttypescript

What are the steps to integrate mailjet into my Vue application?

I am looking to utilize mailjet for my contact form. I have installed it using "$ yarn add node-mailjet" and followed the steps provided. However, I am a bit confused about whether I am integrating mailjet correctly. Below is the code I am currently using: ...

javascriptvue.jsmailjet

Issue with Vue.js Typescript when setting a debounced function

Upon debouncing a function in my Vue.js application, I encountered the following error message: Type 'DebouncedFunc<(queryParams: QueryParams, page?: number) => Promise<void>>' is not assignable to type '(queryParams: QueryPa ...

javascripttypescriptvue.jswebfrontend

Convert a webpage into a PDF file while retaining its original formatting and appearance as seen in the browser

Is there a quick and easy way to save a dynamically generated PHP web page as a PDF without needing to rely on Opera browser or a virtual printer? I've tried using jsPDF, but it has limitations with fonts, utf-8 characters, and CSS styles. I'm lo ...

javascriptphphtmlpdf