Как отображать данные JSON при клике с помощью JavaScript

Question

У меня возникли проблемы с написанием логики этого кода. Я проанализировал данные из этого большого API .

Код в настоящее время извлекает все заголовки программ (имеется несколько экземпляров одного и того же заголовка) и сравнивает его с массивом шоу поздней ночи, а затем распечатывает их один раз в собственном теге <p>.

Я бы хотел как-то щелкнуть название программы и отобразить больше данных JSON.

Я подумал сравнить <p> innerHTML с переменной title и, когда щелкнул ее div, вернуть список гостей для этой конкретной программы. Я играл с логикой, и не слишком уверен, что я на правильном пути.

var data = JSON.parse(request.responseText);
var set = new Set();
var x = '';
const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];


class TVProgram {

constructor(title, guests) {
  this.title = title;
  this.guests = guests;
}

// Gets title instance once to display in view
getShow(array) {
  let programs = document.getElementById('programs');
  let elem = '';

  if (array.indexOf(this.title) !== -1){
    if (!set.has(this.title)) {
      set.add(this.title);
    }
    set.forEach((value) => {
      elem += cardTemplate(value)
    });
    programs.innerHTML = elem;
  }

  getLineup() { 
    // if div is clicked, get name in <p>
    // if name == title variable, print guests
  }
}

function cardTemplate(value) {
  return `
  <div class = "cards">
    <p class = "host">${value}</p>
  </div>
  `
}

//...
for (x in data){
  // JSON properties
  let title = data[x]._embedded.show.name;
  let guests = data[x].name;

  let latenight = new TVProgram(title, guests);
  latenight.getShow(lateNightHosts);
}

Я бы хотел придерживаться ванильного JavaScript. Относительно новый язык, спасибо заранее!

Answer 1

Я прочитал то, что вы хотели, и я придумал свой собственный подход. Вы можете увидеть рабочую копию здесь https://jsfiddle.net/sm42xj38/

const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];


class TVProgram {

  constructor(data) {
    this.data = data;
    this.popup = this.popup.bind(this); // this is required because I'm setting this.popup as the callback for click
  }

  popup(){
    // Just a simple alert which pretty prints all the JSON data for this TVProgram
    alert(JSON.stringify(this.data, null, 10));
  }

  render(){
    const {name} = this.data;

    let card = document.createElement('div');
    card.className = "cards";
    let host = document.createElement('p');
    host.className = "host";
    // When the user clicks the element, the popup() function is called on this specific object. This specific object has the data for 1 TVProgram. 
    host.addEventListener('click', this.popup); 
    // above event could also be, then the binding in the constructor is not required.
    // host.addEventListener('click', function() { this.popup() }); 
    host.textContent = name;
    card.append(host);

    return card;
  }
}

// call the API
axios.get('https://api.tvmaze.com/schedule/full').then(response => {
    return response.data;
})
.then(data => {
  // filter the shows only available in the lateNightHosts list
  return data.filter(m => ~lateNightHosts.indexOf(m._embedded.show.name));
})
.then(shows => {
    // Create a TVProgram for each of the filtered shows
    return shows.map(show => new TVProgram(show));
})
.then(programs => {
    // Add every TVProgram to a DOM element
    programs.forEach(program => {
    document.getElementById("shows").appendChild(program.render());
  })

})

Как видите, я использую axios в качестве http-клиента, потому что он меньше кода.

Это ОЧЕНЬ ОЧЕНЬ свободно на основе того, как работает React, с методом рендеринга в классе TVProgram. Я не использую шаблоны, потому что сложность шаблона. Событие основано на элементе dom, который связан с TVProgram, который имеет только данные этого конкретного шоу. Поэтому все данные хранятся в памяти, а не в DOM.