Retrieve the image URL from a JSON object on the domain wikipedia.org

I can't seem to figure out how to retrieve the original value from the json object. I keep getting lost...

{
    "batchcomplete":"",
    "query":{
        "normalized":[{
            "from":"dog","to":"Dog"
        }]
        ,
        "pages":{
            "4269567":
            {
                "pageid":4269567,
                "ns":0,"title":"Dog",
                "original":
                {
                    "source":"https://upload.wikimedia.org/wikipedia/commons/d/d9/Collage_of_Nine_Dogs.jpg",
                    "width":1665,
                    "height":1463
                }
            }
        }
    }

}

This is my current javascript code, but it's not working:

div.innerHTML += response.pages[0].original[3].source;

I am trying to retrieve the following URL:

 https://upload.wikimedia.org/wikipedia/commons/d/d9/Collage_of_Nine_Dogs.jpg

I have been using this javascript function:

 fetch(url)
    .then(function(response){return response.json();})
     .then(function(response) {

      var div = document.getElementById('image');

            div.innerHTML += response.pages[0].original.source;


          })
       .catch(function(error){console.log(error);});

Answer №1

It appears that you may be experiencing some confusion with your object syntax. If you are looking to access the source property within your object, it should currently be accessed as

response.query.pages['4269567'].original.source

However, for a more dynamic approach, you could utilize the following:

Object.values(response.query.pages)[0].original.source

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

How to display and retrieve data from a JSON object using JavaScript

Having trouble retrieving input values from a JSON object and getting 'undefined' when running the code. Any suggestions or ideas would be greatly appreciated as I have tried various approaches. Additionally, I need to utilize JSON for my school ...

Storing complex data using AJAX and HTML techniques

Consider this scenario. I have a table (<table>) where users can input the time spent on a project in a specific week. For example: -------------------------------------- |Project ID: | Monday | Tuesday | ...| | 123 | 7:15 | 3:45 | ... ...

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

A unique code written in javascript using jQuery allows users to create a "box" on a website with each click of a button, triggering an alert message upon clicking the box. The process is as follows: 1) Clicking the "Add (#addBox)" button appends a new li ...

Tips for choosing one specific element among multiple elements in cheerio nodejs

Currently, I'm attempting to extract links from a webpage. However, the issue I'm encountering is that I need to extract href from anchor tags, but they contain multiple tags with no class within them. The structure appears as follows. <div c ...

Displaying then concealing a Bootstrap alert - unable to display again

I'm working with a basic hidden dismissible bootstrap alert: <div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none"> <button type="button" class="close" data-dismiss="alert" a ...

Calling a C# Webmethod using jQuery AJAX is not working as expected

I'm currently facing an issue calling a web method that I created. The problem lies in the fact that the ajax call isn't reaching my web method, which is puzzling to me because I have another web method in the same file with the same return type ...

What is the preferred method for logging out: using window.location.replace('/') or setting window.location.href to window.location.origin?

When it comes to a logout button, which is the better option: window.location.replace('/') or window.location.href=window.location.origin? Can you explain the difference between these two methods? It's my understanding that both of them remo ...

Deciphering the costs within a complex framework of markets and participants?

I'm currently a beginner in the world of coding and am striving to understand how to interpret json data. I am specifically dealing with a string that provides information on football betting markets, including details like marketId for individual mat ...

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

Attempting to measure download speed using an AJAX call. Below is the code snippet: var start = new Date(); $.ajax ({ url: 'https://www.example.com/perftest/dummyFile1024', cache: false, success : function() { var total = ( ...

Accessing a local JSON data file via an AJAX call

function fetchColor() { var promise = $.Deferred(); $.ajax ({ url: 'ajax/color/Red.json', dataType: 'json', type: 'get', success: function(data){ promise.resolve(data); ...

Transform the Curly Braces within a string into an HTML span Element using JSX

Looking to parameterize a string like 'Hello {name}, how are you?' in React Component? Want to replace curly braces with variable text and highlight it using span/strong tag. Here's an example of the desired final result: Hello <span cla ...

constructing a nested container using XMLHttpRequest

I am working on creating a nested div-container structure using AJAX and adding the text "Hello World" to the inner container. The outer container serves as a holder for the inner container in this case. Below is the code I have written: index.html: ...

When a key is not hardcoded, the JQ filter will return 'false'

While using JQ to check the value of a key, the filter is unexpectedly giving back false instead of true. Let's consider the following variables - TAGS='{"kubernetes.io/cluster/my-cluster":"owned"} CLUSTER_NAME="my-clust ...

What is the best way to extract multiple variables from a function in JavaScript?

After creating the function buttonEffects() with four different button effects, I am now facing the challenge of bringing these variables outside of the function and using them in another function. Is it possible to achieve this without recoding everything ...

Shut down a pop-up overlay

I've been facing a challenge in implementing greasemonkey to automatically close a modal when the "x" button is clicked. Allow me to share with you the code snippet for the webpage: <div class="modal-header"> <button type="button" class="clo ...

Updating a string's value in Angular based on user input

I am currently developing a custom offer letter template that will dynamically update key data points such as Name, Address, Role, Salary, etc based on the selected candidate from a list. The dynamic data points will be enclosed within <<>> in ...

Display the list items when the page first loads

I currently have this code snippet: <nav> <ul class="sel"> <li> <a href="#LINK1" data-title="A">A</a> </li> <li> <a href ...

Dealing with text changes in JQuery inputs: best practices

Although this question has been raised numerous times, a definitive answer remains elusive. My goal is to trigger a process (such as an ajax call) when a user types into an input field. Initially, I attempted to utilize the onchange event, but it failed to ...

Error message indicating that the REST service response encountered an issue with java.io.IOException: UT010029 where the stream was

Having trouble with JSON conversion in a Spring Boot application? @Lob @Column(name = "attachment") private byte[] attachment; Are you encountering an exception like the following while working with REST services? If so, you may be facing issues with ...