methods for retrieving nested JSON data from an API endpoint

My data has been exported in JSON format

{
"count":79,
"stories":{
  "23658975":{
     "title":"NOMINATIVO",
     "description":"BUSDRAGHI PIERGIORGIO",
     "updated_at":"2013-06-16T18:55:56+02:00",
     "created_at":"2013-06-16T18:39:06+02:00",
     "due_date":null,
     "start_date":null,
     "story_type":"task",
     "state":"not started",
     "position":14,
     "archived":false,
     "deleted_at":null,
     "sub_story_count":0,
     "budget_estimate_in_cents":null,
     "time_estimate_in_minutes":null,
     "budget_used_in_cents":0,
     "logged_billable_time_in_minutes":0,
     "id":"23658975",
     "workspace_id":"3190675",
     "parent_id":"23658965"
  },
  "23658985":{
     "title":"SOGGETTO",
     "description":"PRIVATO",
     "updated_at":"2013-06-16T18:55:56+02:00",
     "created_at":"2013-06-16T18:39:06+02:00",
     "due_date":null,
     "start_date":null,
     "story_type":"task",
     "state":"not started",
     "position":15,
     "archived":false,
     "deleted_at":null,
     "sub_story_count":0,
     "budget_estimate_in_cents":null,
     "time_estimate_in_minutes":null,
     "budget_used_in_cents":0,
     "logged_billable_time_in_minutes":0,
     "id":"23658985",
     "workspace_id":"3190675",
     "parent_id":"23658965"
  },
  "23658995":{
     "title":"CF/P.IVA",
     "description":"BSD PRG 77P19 G999C",
     "updated_at":"2013-06-16T18:55:56+02:00",
     "created_at":"2013-06-16T18:39:06+02:00",
     "due_date":null,
     "start_date":null,
     "story_type":"task",
     "state":"not started",
     "position":16,
     "archived":false,
     "deleted_at":null,
     "sub_story_count":0,
     "budget_estimate_in_cents":null,
     "time_estimate_in_minutes":null,
     "budget_used_in_cents":0,
     "logged_billable_time_in_minutes":0,
     "id":"23658995",
     "workspace_id":"3190675",
     "parent_id":"236589... (Check the link for full file)

The data was automatically generated through an API endpoint, and I'm unable to modify its structure. You can view the entire JSON file here

This is what I aim to accomplish:

  1. Create a webpage with a field where users can input the workspace_id from the API URL and a button to trigger the search function
  2. Retrieve data from the JSON file and display the "title" and "description" values in HTML tables

Example of how the table should look:

<TABLE>
<TR>
<TD>NUMERO SINISTRO</TD>
<TD>DATA SINISTRO</TD>
<TD>MORE DATA</TD>
</TR>
<TR>
<TD>"description" value for "NUMERO SINISTRO" goes here</TD>
<TD>"description" value for "DATA SINISTRO" goes here</TD>
<TD>and so on...</TD></TR>
</TABLE>

I find this task challenging, any suggestions or guidance would be greatly appreciated.

Answer №1

Take a look at this article and give it a shot. Pay attention to the part titled "Reading JSON from an external file"

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 way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Experiencing a perplexing dilemma. While viewing a web page created using html, jquery, and css on the same browser but in two separate tabs, I am encountering varying renderings of the page. Scenario 1: Directly loading the html file from the file system ...

What's causing the show/hide feature to malfunction within the for loop in Vue.js?

I've encountered an issue with my for loop where the show/hide functionality doesn't seem to work despite everything else functioning properly. I've been trying to troubleshoot this problem without success. <div id="app"> <ul> ...

Steer clear of including optional dependencies when using Yarn for package installations

Within my yarn.lock file, there is a single reference to momentjs: pikaday@^1.6.0: version "1.6.1" resolved "https://registry.yarnpkg.com/pikaday/-/pikaday-1.6.1.tgz#b91bcb9b8539cedd8dd6d08e4e7465e12095671b0" optionalDependencies: moment "2.x" ...

Create queries for relays in a dynamic manner

I'm using Relay Modern for my client GraphQL interface and I am curious to know if it is possible to dynamically generate query statements within Relay Modern. For example, can I change the original query structure from: const ComponentQuery = graphq ...

The Karma Node Package is failing to run and providing no information

I've been troubleshooting an issue with my karma.conf.js file for the past two days. Despite my efforts, the terminal output provides no helpful information to identify the source of the problem. There are no hints within the document itself indicatin ...

Accessing Form Data as an Array in a Single Page Application

I'm currently in the process of developing a single-page PHP application and I'm experimenting with submitting the form using ajax .post() instead of the traditional form submission that redirects to another page. However, I'm experiencing d ...

What is the best way to locate a function (whether it be a GET, POST, etc.) within index.js using an Express router

I've been trying to set up a router in Express, following a tutorial. However, my code can't seem to find the function get/users. Interestingly, it works fine when I include it in index.js index.js : const express = require('express' ...

The misleading A*(A-star) algorithm inaccurately produces faulty routes and ultimately collapses

I am currently working on implementing the A*(A-star) algorithm in react.js, but I am facing a problem. Whenever the startNode (green) or destinationNode (blue) have more than one neighbour or if there is a cycle in the graph, my program crashes. There see ...

Linking promises together ensures that they always resolve with a result

My understanding of how to chain promises is still not completely solid. What I am trying to achieve is as follows: I have a promise that can either resolve or reject. The following code checks for this and continues if the promise resolves, or stops if i ...

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

Stencil by BigCommerce: Keeping Track of Product Variant Stock Levels

Looking to implement A/B testing on the Product Detail Page regarding the stock_level of a product's variants. Planning to show a message like "Hurry, only 3 more in stock" if quantity is less than 5 after user selects options. I am confident that my ...

Canceling pending asynchronous actions in React/Redux: A step-by-step guide

Imagine the scenario where a user navigates to a page and two asynchronous Redux actions are dispatched simultaneously to fetch related sets of data. If one of these fetches fails, the component will detect it and render an error component on the next cycl ...

What is the best approach: Referencing schema within properties or including it as an array in Mongoose?

Consider the scenario where we have two schemas, User and Post. Should we include a reference to User in Post's properties or should we add an array of Post schema inside User schema? Which approach is more efficient in terms of performance and other ...

Tips for retrieving HTML file content as a string using JavaScript

I'm looking to retrieve the contents of an HTML file using JavaScript and store it as a string. I tried writing some code for this purpose, but unfortunately, I encountered an error: Error: Cannot find module 'xmlhttprequest' Could someone ...

How can we ensure only one click event is executed per element type in jQuery?

Here's the issue: I have a list of items with their own content organized in lists. Using jQuery, I've set it up so that when you click on an item, the list expands to show its content. However, when clicking on another item, the previously click ...

Is there a way to change the color of a specific tab without affecting the content within it

I am attempting to change the color of an individual tab using jQuery. However, when I set the background attribute in CSS, it colors the entire background instead. What specific property should I be setting to only change the color of the tab itself? ...

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I hav ...

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

Attempting to iterate through the array using *ngFor as shown below. let geographicalArea = [{ "_id": "5e77f43e48348935b4571fa7", "name": "Latin America", "employee": { "_id": "5e77c50c4476e734d8b30dc6", "name": "Thomas", ...

Can someone explain the inner workings of the Typescript property decorator?

I was recently exploring Typescript property decorators, and I encountered some unexpected behavior in the following code: function dec(hasRole: boolean) { return function (target: any, propertyName: string) { let val = target[propertyName]; ...

Is there a way for me to discover the top trending photos on Instagram today?

Finding information on the Instagram API can be quite challenging due to poor documentation. Is there a method available to discover the most liked Instagram photos by location, such as identifying the top picture liked by Danish users today? Any insight ...