Задать вопрос
@mknice
javascript

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

У меня есть файл 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": "Zechariah48@hotmail.com",
"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 - отключается.
5ba888d472f44690315074.png
  • Вопрос задан
  • 2487 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 2
Sergamers
@Sergamers
front-end
Чтоб реализовывать такие вещи нужно обладать как минимум базовыми навыками. Без этого не будет даже понимания что релизуется.

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

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

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

Правда, что-то мне кажется ты это не сделаешь . . .
Ответ написан
Комментировать
Комментировать
@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();

        }

    } );
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправить адаптивную верстку на Tilda Zero Block
20 апр. 2024, в 06:39
4000 руб./за проект
Доработка аддона для Xenforo v2.2.13
20 апр. 2024, в 06:06
200 руб./за проект
Привязка к Маркетплейсам 1С Розница 2.3
20 апр. 2024, в 05:26
10000 руб./за проект
Ещё заказы