JSON файл, как подлючить? Как поднянуть инфу с JSON файла?

Question

[mknice]

У меня есть файл people.json
Примерно с такими данными:
{
"general": {
"firstName": "Christian",
"lastName": "Wuckert",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/low..."
},
"job": {
"company": "Jakubowski Inc",
"title": "Future Branding Assistant"
},
"contact": {
"email": "[e-mail]",
"phone": "555-516-5564"
},
"address": {
"street": "1946 Nolan Mountain",
"city": "Garnet stad",
"zipCode": "79438",
"country": "Puerto Rico"
}
}
Подскажите пожалуйста как подключить его. В HTML или JS? Может туда и туда нужно что-то писать?
Так же мне нужно при нажатии на иконку слева, высвечивалась справа вся информация о этом человеке. Подскажите пожалуйста. Мб литературу какую?
Знал бы я ещё что такое парсить… Ну да ладно, никакого питона пхп и т.д. только фронтенд. Мой проет пишу на HTML. CSS, JS. Angular6, TS, установил пакеты Rx: rxj и NgRх. Парсить… Можно на JS, если будет проще на ангуляре или ts то можно и на этом.
Файлы хочу сохранять никаких БД я не использую . Думаю что то, что справа изначально будет скрыто c помощью css display : none. А потом при условии что юзер нажал на одну из иконок справа вся информация всплывает и display : none - отключается.

Answer 1

[Сергей]

Чтоб реализовывать такие вещи нужно обладать как минимум базовыми навыками. Без этого не будет даже понимания что релизуется.

В проекте ангуляра ( если сборка через angular cli ) есть папка - src\assets. Создай там папку ( если там много json будет) и положи туда json файлы.

Обращение к файлу происходит с помощью HttpClient. Чтоб он заработал нужно подключить модуль в проект. Вид запроса будет:

return this.http.get('/assets/file.json');. Так же, чтоб получить данные, нужно сделать подписку вида: getJson().subscribe( ( data ) => {});.

Правда, что-то мне кажется ты это не сделаешь . . .

Answer 2

[siarheisiarhei]

как вариант...

// 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();

        }

    } );