Here is a step-by-step guide on extracting a specific field from a JSON object obtained through an AJAX call to the Facebook Graph

I've been attempting to extract specific field values from a JSON object retrieved from the Facebook Graph API using an AJAX call in JavaScript.

The code I'm utilizing to access the cover field from the JSON object is not providing the desired results. You can find the code snippet for reference here:

    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 ) {
       if(xmlhttp.status == 200){
           var ur="https://facebook.com/344128252278047";
           var res= JSON.parse(xmlhttp.responseText);
           console.log(res);
           document.getElementById("myDiv").innerHTML=res.cover;

       }
       else if(xmlhttp.status == 400) {
          alert('There was an error 400')
       }
       else {
           alert('something else other than 200 was returned')
       }
javascriptjsonfacebook-graph-api

Answer №1

If you take a closer look at the content of res, you'll notice that the cover field is not easily accessible.

To access the cover, try the following:

res[ur].cover

If you want to access the source mentioned in your comment, you need to do the following:

res[ur].cover.source

This is because your object contains a field with the value 

"https://facebook.com/344128252278047"
, which corresponds to the variable ur. Within that field, there is another field called cover.

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

Is there a way to determine if a React functional component has been displayed in the code?

Currently, I am working on implementing logging to track the time it takes for a functional component in React to render. My main challenge is determining when the rendering of the component is complete and visible to the user on the front end. I believe t ...

javascriptreactjstypescriptreact-hooks

What is the correct way to invoke this function using Ajax?

I am grappling with some code: function modifyEventStatusStyle(object){ if ($(object).hasClass("fa-circle")) { $(object).removeClass("fa-circle").addClass("fa-circle-o"); //alert("true"); } else { $(object).removeClass("fa- ...

javascriptjqueryhtmlajax

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

javascripthtmlajaxiframe

'Unlawful invocation' problem occurs while attempting to upload a file using ajax

Having trouble with uploading a file using ajax as I keep running into an 'Illegal invocation' error when trying to pass the file. All other input fields are successfully passed (if I exclude the file). Here is a simplified version of my code: ...

javascriptjqueryajax

Having difficulty in dynamically loading an image from an API's URL in Angular

In the title, I mentioned that I am utilizing a free API to display cryptocurrency news for my practice project. Everything seems to be working fine except for displaying the images in card view. I will share my code here, so if you have any suggestions on ...

javascriptangular

(discovered: [object Promise]) utilizing Material UI and DexieJS

Exploring DexieJS and Material UI for the first time has been quite a learning experience, so I may have overlooked a crucial aspect. Here is a glimpse of my code: Subscreen.tsx const [fightersArray, setFightersArray] = useState<FighterEntity[]>([]) ...

javascriptreactjsreact-hooksmaterial-uidexie

Pass information to a fresh display when a user selects an item from a listview populated with

Previously, I was utilizing a bundle but it was only returning null. How can I retrieve the name of the student populated from the database using JSON of the clicked item and display it in a new activity? public void ListDrawer() { ...

androidmysqljsonlistview

Ways to update the component's state externally

I'm new to Next.js (and React) and I'm attempting to update the state of a component from outside the component. Essentially, I am conditionally rendering HTML in the component and have a button inside the component that triggers a function to se ...

javascriptreactjstypescriptnext.js

Defer the execution of deferred.then() with Ajax returns

Here is my AJAX request setup: $.ajax({ type: 'GET', url: url, dataType: "json", success: function(data) { // ... callbak(true); }, }) .then( function( response ) { // ... }); I need assistance ...

javascriptjqueryajax

Is it possible to transfer elements from one array to another when clicked, but without copying the contents to the new array objects?

Welcome, For my latest project, I am excited to create a "Learning Cards" App from scratch. The concept is pretty straightforward: it consists of cards with questions. Upon clicking a button, you can reveal the correct answer. Additionally, there's a ...

javascriptarraysreactjsnpm

Is jQuery returning unchecked boxes when getting checked items?

It's been causing me frustration for hours. I'm attempting to retrieve an array with the values of all "checked" checkboxes when "All" is selected. Strangely, on my website, selecting "All" results in an empty set, but unchecking it returns the c ...

javascriptjquery

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 ...

javascriptjquery

How can we merge all the values of keys within an object into a new array using ES6?

My objective is to transform dynamic data into an array based on the keys of the toolset object, which does not have a constant number of keys. { toolset:{ info1:{ event-date:{}, event-time:{}, }, info ...

javascriptreactjs

The Modal Textarea refreshes each time it is clicked

Whenever I try to type on the modal with 2 textareas, it stops and exits the textarea. The issue seems to be with onChange={event => setTitle(event.target.value)}, but I'm not sure how to fix it. <Modal.Body> <form onSub ...

javascripthtmlreactjsbootstrap-modal

If the <span> element contains text, then apply a class to the <i> element

Is there a way to target a different i element with the id 'partnered' and add the class 'checkmark'? $(document).ready(function () { jQuery('span:contains("true")').addClass('checkmark'); }); The current code su ...

javascriptjqueryhtml

Issues with CSS Modules not applying styles in next.js 13 version

Employing next.js 13.1.1 along with /app Previously, I had been handling all of my styles using a global.css, however, I am now attempting to transition them into CSS Modules. Within my root layout.js, there is a Header component that is imported from ./ ...

javascriptreactjsnext.jsnext.js13

Clearing selections from a multiple-choice input field

I am seeking to implement a delete feature in a multi-select element similar to the functionality seen here on stackoverflow when selecting multiple tags for a question. Once an item is selected, I would like to display a close icon next to it so that user ...

javascriptjquerycssangularjsmulti-select

Utilizing various filters and sorting options on API response within Angular 8

Upon receiving the following API response: [ { "imgPaths":[ "gallery/products/55ccb60cddb4d9bded02accb26827ce4" ], "_id":"5f3e961d65c6d591ba04f3d3", "productName":" ...

javascriptangulartypescript

Adding a dynamic row to ag-grid with customizable columns on the fly

My goal is to dynamically add a new row when a button is clicked in the ag-grid on my ReactJS page. The code below works for me when I know the fixed number of columns at design-time. let row ={ products1: "a", products2: "b", products ...

javascriptreactjsdatagridag-grid

Whenever I try to select a spinner, the program throws a null pointer exception

I am encountering a null pointer exception when I interact with my spinner that is supposed to pass a JSON object to the next activity. Here is the code for my spinner: retrieveGames1BGTask = new RetrieveGames1BGTask(); retrieveGames1BGTask.execu ...

androidjsonspinner