Issues with utilizing Fetch API and JSON Data

I'm encountering some difficulties while trying to interact with my json file. I am using the fetch API to retrieve my json file but, unfortunately, when I log the response to the console, I don't see any data returned. Instead, what appears is a sort of header response.

"use strict";

fetch('https://www.jasonbase.com/things/wAe3.json')
.then((data) => {
   console.log(data); 
})
.catch((err) => {
    if(err) console.log(err);
});

It would be ideal to be able to extract each property from the following json file:

{
  "completed-works": {
    "example1": {
      "title": "Example A",
      "date": "1-6-18",
      "time": "8 : 23 PM",
      "preview": "Liquorice lollipop sugar plum pie dragée chocolate..."
    }
  }
}

Appreciate any help in advance.

javascriptjsonfetch

Answer №1

It is important to retrieve the JSON data in the following manner:

"use strict";

fetch('https://www.myjsondata.com/things/qWe7.json')
.then((response) => {
   return response.json()
})
.then((result) => {
   console.log(result); 
})
.catch((error) => {
    if(error) console.log(error);
});

Answer №2

Once the URL has been obtained, make sure to use .then(response => response.json()), which allows you to retrieve the properties such as title, id, or time

Best of luck!

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

The error message from the mongoose plugin is indicating a problem: it seems that the Schema for the model "Appointment" has not been properly registered

I need help troubleshooting a mongoose error that is being thrown. throw new mongoose.Error.MissingSchemaError(name); ^ MissingSchemaError: Schema hasn't been registered for model "Appointment". Use mongoose.model(name, schema) I have double-c ...

javascriptnode.jsmongodbmongoosemongoose-schema

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

javascripthtmlform-data

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

javascripthtmlcss

Is the user's permission to access the Clipboard being granted?

Is there a way to verify if the user has allowed clipboard read permission using JavaScript? I want to retrieve a boolean value that reflects the current status of clipboard permissions. ...

javascripttypescriptbrowserpermissionsclipboard

Response from the Dojo XHRget request

When using Dojo, I send a xhrget request to my servlet and receive a response in either a json object or json array format. However, when trying to print the response, it shows as Object[] object. How can I retrieve the json objects exactly as they were s ...

ajaxjsondojo

Analyze items in two arrays using JavaScript and add any items that are missing

I am working on a JSON function that involves comparing objects in two different arrays, array1 and array2. The goal is to identify any missing items and either append them to array2 or create a new array called newArray1. Here is an example: const arra ...

javascriptarraysjson

Using jQuery to select all child elements based on a specified condition

Is there a way to locate all instances of .post-comment-replies that have a nested '.post-comment-reply' within them, rather than being at the first level? Currently, the code provided retrieves not only those .post-comment-replies with nested . ...

javascriptjquery

Passing a PHP variable between PHP files with the help of jQuery

I'm facing a minor issue. I'm trying to pass a PHP variable from one PHP file to another using setInterval. However, I'm unsure of how to include the PHP variable in my jQuery code. Here is the content of first.php: <?php $phpvariable= ...

javascriptphpjqueryajax

Exploring various websites simultaneously using window.open

As a newcomer to javascript, I have encountered an issue with the window.open() method that I would like some help with. In my code, I take a user string, modify it in different ways, and then search for these variations. The intention is to open a new wi ...

javascriptarrayswindow.open

Choosing2 - incorporate a style to a distinct choice

Let's talk about a select element I have: <select id="mySelect"> <option>Volvo</option> <option value="Cat" class="red">Cat</option> <option value="Dog" class="r ...

javascriptjqueryjquery-select2

Store the text area content as a JSON object

What is the best way to store the content of a textarea in JSON format? I am currently working on a project where I have a textarea element and I need to save its value into a JavaScript object. Everything is functioning correctly except when 'enter ...

javascriptjqueryjsontextarea

The initial request does not include the cookie

My server.js file in the express application has the following code: var express = require('express'); var fallback = require('express-history-api-fallback'); var compress = require('compression'); var favicon = require(&apos ...

javascriptnode.jsexpresscookiesmiddleware

Leverage the exported data from Highcharts Editor to create a fresh React chart

I am currently working on implementing the following workflow Create a chart using the Highcharts Editor tool Export the JSON object from the Editor that represents the chart Utilize the exported JSON to render a new chart After creating a chart through ...

javascriptreactjstypescripthighcharts

Revise: Anticipated output missing at conclusion of arrow function

Here is the code snippet that I am having trouble with: <DetailsBox title={t('catalogPage.componentDetails.specs.used')}> {component?.projects.map(project => { projectList?.map(name => { if (project.id === name.id) { ...

javascripttypescriptdictionaryfilter

Is there a way to resize SVG images without having to modify the underlying source code?

Within my Vue Single File Component, there is a prop labeled svg, which holds a string of SVG markup like <svg>...</svg>. What is the best way to render and resize this SVG content? ...

javascripthtmlvue.jssvgvuetify.js

What is the best way to store settings values permanently during the installation process in a react-native application?

I am looking for a way to save the settings of my app only during installation, rather than every time the app is opened, in order to prevent the options from resetting. I have tried searching on YouTube but most tutorials cover only user login persistence ...

javascriptreactjsreact-native

Using the event object in the onClick handler within React applications

In my React app, I have implemented a feature where clicking on a column heading sorts the data in the table using merge sort algorithm My goal is to pass both the data (an array of objects) and the event object to the sorting function. However, I am faci ...

javascriptreactjs

Using Flask to pass variable data from one route to another in Python using the `url

I am facing an issue with sending a variable value to Python from Flask HTML/JS via url_for(). Here's my Python code: @app.route('/video_feed/<device>') def video_feed(device): # return the response generated along with the speci ...

javascriptflaskjinja2

The data from the method in the Vue.js component is not displaying as expected

Currently diving into Vue.JS (2) and exploring the world of components. My current challenge involves using a component within another component, grabbing data from a data method. Here's what I have so far: HTML <div id="root"> <h1> ...

javascriptvue.jsvuejs2vue-component

Replace a portion of text with a RxJS countdown timer

I am currently working on integrating a countdown timer using rxjs in my angular 12 project. Here is what I have in my typescript file: let timeLeft$ = interval(1000).pipe( map(x => this.calcTimeDiff(orderCutOffTime)), shareReplay(1) ); The calcTim ...

javascriptangulartypescriptrxjs