Question

我在编写此代码的逻辑时遇到了一些麻烦。我已经解析了这个large 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);
}

我想坚持使用vanilla 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类上有一个渲染方法。我没有使用模板，因为模板的复杂性。该事件基于与TVProgram绑定的dom元素，该元素仅具有该特定节目的数据。因此，所有数据都存储在内存中，而不是存储在DOM中。

如何使用JavaScript单击显示JSON数据

1 个答案: