Как подключить и изменять скачанный файл JSON?

Question

[Максим js]

Подскажите как подключить этот API локально url = 'https://api.lever.co/v0/postings/leverdemo?group=t...'
чтобы заработал сайт ?
вот js

// Replace "leverdemo" with your own company name
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'
//Checking for potential Lever source or origin parameters
var pageUrl = window.location.href;
var leverParameter = '';
var trackingPrefix = '?lever-'

if( pageUrl.indexOf(trackingPrefix) >= 0){
  // Found Lever parameter
  var pageUrlSplit = pageUrl.split(trackingPrefix);
  leverParameter = '?lever-'+pageUrlSplit[1];
}

//Functions for checking if the variable is unspecified
function cleanString(string) {
  if (string) {
    var cleanString = string.replace(/\s+/ig, "");
    return cleanString;
  }
  else {
    return "Uncategorized";
  }
}

function nullCheck(string) {
  if (!string) {
    var result = 'Uncategorized'
    return result;
  }
  else {
    return string;
  }
}

function createJobs(_data) {
  for(i = 0; i < _data.length; i++) {

    var team = nullCheck(_data[i].title)
    var teamCleanString = cleanString(team);
    $('#jobs-container .jobs-teams').append(
        '<a href="#" class="btn '+teamCleanString+'">'+team+'</a>'
      );
  }

  for(i = 0; i < _data.length; i++) {
    for (j = 0; j < _data[i].postings.length; j ++) {
      var posting = _data[i].postings[j]
      var title = posting.text
      var description = posting.description
      //Making each job description shorter than 250 characters
      var shortDescription = $.trim(description).substring(0, 250)
      .replace('\n', ' ') + "...";
      var location = nullCheck(posting.categories.location);
      var locationCleanString = cleanString(location);
      var commitment = nullCheck(posting.categories.commitment);
      var commitmentCleanString = cleanString(commitment);
      var team = nullCheck(posting.categories.team);
      var teamCleanString = cleanString(team);
      var link = posting.hostedUrl+leverParameter;

    	$('#jobs-container .jobs-list').append(
      '<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
        '<a class="job-title" href="'+link+'"">'+title+'</a>' +
        '<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
        '<p class="description">'+shortDescription+'</p>' +
        '<a class="btn" href="'+link+'">Learn more</a>' +
      '</div>'

      );
    }
  }
}

//Creating filter buttons for sorting your jobs
function activateButtons(_data){
  $('.jobs-teams').on("click", "a", function(e) {
    e.preventDefault();
    for(i = 0; i < _data.length; i++) {
      var teamRaw = _data[i].title;
      var team = cleanString(teamRaw);
      var jobs = $(".jobs-list");if ($(this).hasClass(team)) {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
          jobs.find(".job").fadeIn("fast");
        }
        else {
          $(".jobs-teams").find("a").removeClass("active");
          $(this).addClass("active");
          jobs.find("."+team).fadeIn("fast");
          jobs.find(".job").not("."+team).fadeOut("fast");
        }
      }
    }
  })
}

//Fetching job postings from Lever's postings API
$.ajax({
  dataType: "json",
  url: url,
  success: function(data){
    createJobs(data);
    activateButtons(data);
  }
});

Comments

[Kovalsky]

https://github.com/lever/postings-api/blob/master/...

[Максим js]

Никита Полевой, спасибо, но там к сожалению не написано куда,как,к чему подключить этот файл и как его редактировать.
Например если я загружу файлы сайта на хостинг, то куда кидать этот файл и как его можно удобно редактировать?Там 7000 строк кода кучей друг за другом ) как в этой куче взять и добавить пару кнопочек например?

[Kovalsky]

Максим Киреев, "куда,как,к чему подключить этот файл и как его редактировать." - не соглашусь. Вы так пишете будто этот файл свалился вам на голову прямо посреди бела дня, и теперь вы не знаете что делать.

Ваш заголовок по сути не имеет ничего общего с проблемой, потому что никакого файла строго говоря не существует, вся полученная вами информация формируется динамически с помощью Lever Postings API. По вашей ссылке можно получить все вакансии которые пользователь leverdemo сайта hire.lever.co создал у себя в личном кабинете. Эти вакансии автоматически отображаются на динамически созданной странице этого самого пользователя: jobs.lever.co/leverdemo. Короче говоря jobs.lever это просто инструмент упрощенного создания сайтов с вакансиями, а скачанный вами JSON содержит вакансии которые вы создали на сайте, то есть этот файл существует только для чтения и с его помощью нельзя ничего нигде изменять, зато можно зайти в свою учетку и там их поправить. У них даже есть свой faq.

Если вам действительно зачем-то нужно сохранить этот файл и поменять его, то тут вам помогут такие программные средства как текстовые редакторы (я люблю sublime text 2/3) или нода с помощью которой можно будет распарсить JSON в объект после чего изменить и сохранить, или онлайновые редакторы. А на самом деле вариантов тысячи

В общем если мой хрустальный шар не врёт, и у вас есть на руках URL Lever Postings API отдающий вам список вакансий, который вам надо поменять, то для этого вам надо зайти в админку lever и через местный интерфейс изменить список вакансий.

[Максим js]

Никита Полевой, скажите пожалуйста как подключить его на свой сайт без отправки на серверы и т.д. просто как редактируемый файл хранящий данные можно его подключить?

[Kovalsky]

Максим Киреев, ну почему бы и нет, просто сохраняете в любом удобном для вас формате и подключаете любым удобным для вас способом. Но вы же понимаете, что в таком случае у вас в файле будут старые данные?

[Максим js]

Никита Полевой, в этом же и главный вопрос) в каком формате сохранить и как подключить чтобы сайт заработал без отправки запросов на сервер с этим api

[Kovalsky]

Максим Киреев, нууууууу, это скорее к вам вопрос; как вам удобно так и делайте. Вообще мне кажется будет гораздо проще с помощью JS качать этот JSON, тогда он будет всегда свежий.

"в каком формате сохранить" - не понял. А какие варианты ответов вы допускаете?

В чем конкретно вопрос? Сохраните в любом текстовом формате, подключайте как угодно - инлайном в код, с помощью шаблонизаторов (например средствами PHP) или запросом на свое хранилище которое будет отдавать этот файл. Не знаю, хоть Ctrl+S, хоть выделите весь текст и нажмите Ctrl+C

[Максим js]

как же все сложно ) вообщем я сохранил все 7000 строк кода в файл text.json . КАК? КАК его подключить ёпрст)
так ?<script src="./text.json"></script> , но так не работает! Скажите пожалуйста уже как его подключить правильно)

[Kovalsky]

Максим js, нет, все не сложно, а как раз наоборот - настолько просто что осталось только выбрать нужный вариант из доступных, а мне сложно делать выбор за вас.

1) При загрузке сайта качать этот файл с помощью JS с lever postings api или с локального хранилища,
2) Вставлять содержимое файла в код страницы с помощью php или вручную

[Максим js]

Можете написать код пожалуйста? Как вставлять содержимое файла в код страницы с помощью php или вручную?

[Kovalsky]

Максим js, ой, ты не нажал "ответить", и я только сейчас увидел.

С помощью PHP например как-то так:

// код некой воображаемой страницы
...
<script>
window.my_awesome_variable = <?php file_get_contents('file://C:/some_file.json');  ?>
</script>
...

Собственно вручную абсолютно так же - записываете нужный вам объект в какую-нибудь переменную, потом используете его обращаясь к этой переменной. Код приведен на скорую руку, надо проверять.

Answer 1

[Игорь Вольный]

URL, к которому ты пытаешься обратиться, - это так называемая конечная точка RESTful сервиса (или по-другому API) (RESTful service API endpoint). В ответ на твой запрос к тебе не файл JSON скачивается, а возвращаются данные в формате JSON. Эти данные предназначены для программы, которая их каким-либо образом будет обрабатывать и производить какие-то действия. Например в случае с указанным в вопросе URL выводить в окне браузера информацию об отделах компании (только уже в более удобоваримом для человеческого глаза виде). Программой может быть, например, вэб-фронтенд, мобильное приложение или программа, которая еще каким-либо образом обрабатывает полученные данные, скажем, преобразует и скармливает другому сервису типа агрегатора.
Так же работать с этими данными?
У каждого RESTful сервиса API должна быть документация, описывающая работу со всеми endpoints (по крайней мере, если речь идет о публичном API типа API VK).
В общих чертах каждый endpoint предназначен для одного действия с данными, которые хранятся на стороне сервиса, предоставляющего API.
Допустим, мы работем с данными об отделах в какой-нибудь компании, и эта компания предоставляет для этого API, обратиться к которому можно по адресу https://api.service.com. Это может быть простое извлечение данных (GET https://api.service.com/departments) - ответ приходит в виде списка объектов. Создание новой записи (POST https://api.service.com/departments/create) - в этом случае твоя программа должна отправить новые данные в оговоренном в документации к сервису формате; тоже, скорее всего, JSON, но еще может быть GraphQL или даже XML. Обновление существующей записи (PUT или PATCH https://api.service.com/departments/). А также удаление существующей записи (DELETE https://api.service.com/departments/).
Таким образом никакой работы с файлами JSON не происходит. Происходит обмен данными в формате JSON между разными частями приложения. В самом простом случае это frontend и backend веб приложения.
Подробнее об архитектуре RESTful можно узнать:
Архитектура REST (Хабр)
REST API Best Practices (язык русский, перевод, Хабр)
Что такое REST API (YouTube)

Comments

[Максим js]

Спасибо большое, но я так и не понял как мне запустить это все дело без конечной точки RESTful сервиса.
Мне нужно выдернуть от туда Алгоритм поиска по ключевым словам! Так как знаний пока еще нет, чтобы написать Алгоритм самому. Мне абсолютно не нужны данные с этого api, мне нужен рабочий код который начинает работать только после подключения этого api. Вот я и пытаюсь выяснить как же мне запустить код без подключения к этому сайту, а просто на своем компьютере даже без интернета.

url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Checking for potential Lever source or origin parameters
var pageUrl = window.location.href;
var leverParameter = '';
var trackingPrefix = '?lever-'

if( pageUrl.indexOf(trackingPrefix) >= 0){
  // Found Lever parameter
  var pageUrlSplit = pageUrl.split(trackingPrefix);
  leverParameter = '?lever-'+pageUrlSplit[1];
}

//Functions for checking if the variable is unspecified
function cleanString(string) {
  if (string) {
    var cleanString = string.replace(/\s+/ig, "");
    return cleanString;
  }
  else {
    return "Uncategorized";
  }
}

function nullCheck(string) {
  if (!string) {
    var result = 'Uncategorized'
    return result;
  }
  else {
    return string;
  }
}

function createJobs(_data) {
  for(i = 0; i < _data.length; i++) {

    var team = nullCheck(_data[i].title)
    var teamCleanString = cleanString(team);
    $('#jobs-container .jobs-teams').append(
        '<a href="#" class="btn '+teamCleanString+'">'+team+'</a>'
      );
  }

  for(i = 0; i < _data.length; i++) {
    for (j = 0; j < _data[i].postings.length; j ++) {
      var posting = _data[i].postings[j]
      var title = posting.text
      var description = posting.description
      //Making each job description shorter than 250 characters
      var shortDescription = $.trim(description).substring(0, 250)
      .replace('\n', ' ') + "...";
      var location = nullCheck(posting.categories.location);
      var locationCleanString = cleanString(location);
      var commitment = nullCheck(posting.categories.commitment);
      var commitmentCleanString = cleanString(commitment);
      var team = nullCheck(posting.categories.team);
      var teamCleanString = cleanString(team);
      var link = posting.hostedUrl+leverParameter;

    	$('#jobs-container .jobs-list').append(
      '<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
        '<a class="job-title" href="'+link+'"">'+title+'</a>' +
        '<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
        '<p class="description">'+shortDescription+'</p>' +
        '<a class="btn" href="'+link+'">Learn more</a>' +
      '</div>'

      );
    }
  }
}

//Creating filter buttons for sorting your jobs
function activateButtons(_data){
  $('.jobs-teams').on("click", "a", function(e) {
    e.preventDefault();
    for(i = 0; i < _data.length; i++) {
      var teamRaw = _data[i].title;
      var team = cleanString(teamRaw);
      var jobs = $(".jobs-list");if ($(this).hasClass(team)) {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
          jobs.find(".job").fadeIn("fast");
        }
        else {
          $(".jobs-teams").find("a").removeClass("active");
          $(this).addClass("active");
          jobs.find("."+team).fadeIn("fast");
          jobs.find(".job").not("."+team).fadeOut("fast");
        }
      }
    }
  })
}

//Fetching job postings from Lever's postings API
$.ajax({
  dataType: "json",
  url: url,
  success: function(data){
    createJobs(data);
    activateButtons(data);
  }
});

как заставить работать этот код , если не отправлять запрос к API.

[Игорь Вольный]

Максим js, код, который ты написал, ничего по ключевым словам не ищет. Всё, что он делает, - это забирает данные с того самого endpoint и формирует из них HTML страницу для последующего показа в браузере. О каком Алгоритме ты говоришь, не очень понятно.
Не хочешь, чтобы этот код брал данные с того API, натрави его на другой API. Например тот, который на твоем рабочем компе крутится. Тебе нужно только написать свой backend на каком-нибудь подходящем языке. Многие любят JavaScript, выполняемый в среде Node.js.
Похоже, ты совсем нуб в вебе. Стоит поискать уроки по ключевым типа "как написать REST приложение node.js javascript html css". Да и вообще для начала поучить основы. Вот один из лучших сайтов в рунете:
learn.javascript.ru