JSON file, how to connect? How to raise info from JSON file?

Question

JavaScript

I have a people.json file
with something like this:
{
"general": {
"firstName": "Christian",
"lastName": "Wuckert",
"avatar": " https://s3.amazonaws.com/uifaces /faces/twitter/low... "
},
"job": {
"company": "Jakubowski Inc",
"title": "Future Branding Assistant"
},
"contact": {
"email": "[email protected] .com",
"phone": "555-516-5564"
},
"address": {
"street": "1946 Nolan Mountain",
"city": "Garnet stad",
"zipCode": "79438",
"country": "Puerto Rico"
}
}
Please tell me how to connect it. In HTML or JS? Maybe there and there you need to write something?
I also need when clicking on the icon on the left, all the information about this person was displayed on the right. Tell me please. MB literature what?
If only I knew what parsing is... Well, okay, no PHP python, etc. frontend only. My project is written in HTML. CSS, js. Angular6, TS, installed Rx packages: rxj and NgRx. Parse ... You can use JS, if it's easier on angular or ts, then you can use this.
Files I want to save no database I do not use . I think that what is on the right will initially be hidden using css display : none. And then, provided that the user clicked on one of the icons on the right, all information pops up and display : none is turned off.

Answer 1

To implement such things, you need to have at least basic skills. Without this, there will not even be an understanding of what is being released.
In the angular project (if the build is via the angular cli) there is a folder - src\assets. Create a folder there (if there is a lot of json there) and put json files there.
The file is accessed using HttpClient. To make it work, you need to connect the module to the project. Request type will be:
return this.http.get('/assets/file.json');. Also, to get the data, you need to make a subscription of the form: getJson().subscribe( ( data ) => {});.
The truth is, I don't think you can do it. . .

Answer 2

as an option...

// get the container to hold the IO globe

    var container = document.getElementById( "globalArea" );

    // create controller for the IO globe, input the container as the parameter

    var controller = new GIO.Controller( container );

    // ask a file for the JSON data, using AJAX to load the data

    $.ajax( {

        url: "data/sampleData.json",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        async: true,
        dataType: "json",
        success: function ( inputData ) {

            // if received the data, use addData() API to add the the data to the controller

            controller.addData( inputData );

            // call the init() API to show the IO globe in the browser

            controller.init();

        }

    } );