如何使用JavaScript在点击时显示JSON数据 [英] How to display JSON data on click with JavaScript

问题描述

我在编写此代码的逻辑时遇到麻烦。我已经从该大型api 中解析了数据。

I'm having some trouble with writing the logic of this code. I've parsed data from this large api.

当前代码检索所有节目标题（同一标题有多个实例）并将其与深夜节目数组进行比较，然后打印使用自己的< p> 标记一次。

Code currently retrieves all program titles (there are multiple instances of the same title) and compares it with the late night show array, then prints them out once in their own <p> tag.

我想以某种方式单击程序标题并显示更多JSON数据。

I'd like to somehow click a program title and display more JSON data.

我想将< p> innerHTML与标题进行比较变量，然后单击其div，返回该特定程序的来宾列表。我一直在研究逻辑，并不太确定自己是否步入正轨。

I thought to compare the <p> innerHTML, to the title variable, and when its div is clicked, return the list of guests for that particular program. I've been playing with the logic, and not too sure if I'm on the right track.

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。相对而言，这是一种相对较新的语言，请先谢谢！！

I'd like to stick to vanilla JavaScript. Relatively new to the language, thanks in advance!

推荐答案

我已经阅读了您想要的内容，并提出了自己的建议。方法。您可以在此处 https://jsfiddle.net/sm42xj38/

I've read what you wanted, and I came up with my own approach. You can see a working copy over here 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客户端，因为它的代码更少。

As you can see, I'm using axios as a http client, because it's less code.

根据React的工作原理，它非常松散，在TVProgram类上使用了render方法。我没有使用模板，因为模板很复杂。该事件基于dom元素，该元素绑定到仅包含特定节目数据的TVProgram。因此，所有数据都存储在内存中，而不是DOM中。

It's VERY VERY loosely based on how React works, with a render method on the TVProgram class. I'm not using templates, because complexity of the template. The event is based on the dom element which is bound to the TVProgram which has only the data of that specific show. Therefor all data is stored in memory, and not in the DOM.

这篇关于如何使用JavaScript在点击时显示JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！