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

explore the branches of a json tree

I have a JSON file containing multiple trees with various branches and leaves: {"id":442500000116137984, "reply":0, "children":[{"id":442502378957201408, "reply":0, "children":[]}]} {"id":442500001084612608, "reply":0, "children":[{"id":442500145871990784 ...

The AudioPlayer refuses to play following a track change

I am looking to implement an audio player in React Nextjs that features interactive dots, each representing an audio track. The functionality I want is such that clicking on a dot will pause the currently playing track (if any) and start playing the select ...

Divide various text files into separate arrays using jq

I'm faced with a challenge involving files containing multiple key value pairs that I need to convert into arrays. Allow me to demonstrate this with some examples from the file contents: # cat content/1.yaml time: "2020-09-14T22:33:40Z" id: ...

Swap out a term in a sentence with an interactive span element in real-time

I'm struggling with a seemingly simple task, and I feel quite embarrassed that I can't seem to solve it. My goal is to identify words in a string that begin with '@' or '#' and change their color to blue. The string itself com ...

Display the results from the API in a div using Vue.js

Currently working on implementing dynamic buttons to fetch data from an API call. Struggling with pushing the data array to the template and div. Here is my VueJS setup: var example = new Vue({ el: '#example', data: function () { ...

Reading Json Array using Newtonsoft.Json Library

I currently have this specific JSON data: [ { "id":"656332", "t":"INTU", "e":"NASDAQ", "l":"108.35", "l_fix":"108.35", "l_cur":"108.35", "s":"2", "ltt":"4:00PM EST", "lt":"Nov 8, 4:00PM EST", "lt_dts":"2016-11-08T16:00:01Z", "c":"+0 ...

Encountering an error while running npm install - package.json data parsing failed

Encountering an error during npm install on Windows 10, using node v6.10.3 and npm v3.10.10 Please assist in resolving this issue. Error message: npm ERR! npm v3.10.10 npm ERR! file C:\angular2-helloworld\package.json npm ERR! code EJSONPARSE ...

What is the best way to retrieve text from the p tag and input it into the text field?

Looking to resolve a situation where two identical IDs exist and need to implement some JQuery. The objective is for the input value to automatically update itself based on changes in the text of the p tag. $(document).ready(function(){ ...

Encountered an error in Next JS and Graph QL where attempting to destructure the property 'data' from an undefined intermediate value

I am encountering an issue while attempting to make a Apollo request to the SpaceX API. I am receiving a 500 (Internal Server Error) and also at getStaticProps. It's unclear whether this is a syntax problem or an error in my method of implementation. ...

Exploring Autocomplete Functionality with SQLite Integration in Flask

I have been searching for a solution to my problem without any success. My SQLite database contains electronic products, and I have a search box that allows users to search for products by typing in their name. However, I want to enhance the user experienc ...

Where does the browser retrieve the source files for "sourcemapped" JavaScript files from?

As I begin working on an existing project built with angular JS, upon opening chrome dev tools and navigating to the "source" view, a message appears: Source map detected... This prompts me to see a link to: https://i.stack.imgur.com/RZKcq.png The fi ...

An abundance of AJAX requests inundating the server

While working on a straightforward AJAX request, I encountered an issue where the server is sending back 3 responses instead of just one (you can see the example in the attached image). Could someone provide insight into why this might be happening? var ...

The bond between TypeORM and express

I am working on establishing Many-to-One and One-to-Many relationships using TypeORM and MySQL with Express. The database consists of two tables: post and user. Each user can have multiple posts, while each post belongs to only one user. I want to utilize ...

What is the best way to allocate values within a for loop?

I am in the process of designing an interface for individuals who have no background in programming. My goal is to allow them to input certain details, and then be able to simply copy and paste the code to make everything function seamlessly. Here is a sa ...

The array is arranged properly, yet React is failing to render it in the correct order

Here's the code snippet I am working with: { this.state.rows.map((qc) => qc.BinsByDayByOrchardsQCs.map((qc2) => qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => !defectsArray.includes(qc3.Defect) &am ...

Is there a compelling case for implementing Meteor in 2017?

Back in the day, Meteor was expected to revolutionize web development on node by simplifying the process of creating interactive applications. Though I'm not well-versed in its history, it seems like most of the development effort has shifted elsewher ...

Extract information from an array located inside a nested object

My aim is to calculate the length of the skills array for each user individually. To begin, I have this JSON data: const txt = `{ "Alex": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

The route is displaying the variable as 'undefined' when I attempt to access it

I had set up CRUD for two different models (venues & artists) - venues works fine, but when I try to access 'artists/index', it gives me an error saying 'Artists is not defined'. After examining the code, I believe I need to do two ...

Checking for the existence of a specific key in JSON data from the Twitter API using

Successfully fetching a tweet from the Twitter API is possible. Along with displaying the user, tweet, and other data, I also want to display the image. However, if there is no image attached to the tweet, nothing appears as the key doesn't exist. ...

Stopping the page from scrolling back to the top when an asynchronous update occurs in Angular

Once the asynchronous request is complete, I dynamically add a new element to the top with this code snippet: Array.prototype.unshift.apply(scope.conversation, conversation.data.message); The issue arises when the added element causes the scroll position ...