Question

我有一个看起来应该像这样的用户界面

上面的图片只是纯HTML。

因此，当我尝试使用React创建它时，我无法将电视节目与特定电视频道对齐，该电视频道按照频道水平溢出。

我在React中得到的图片

我正在从具有对象的json文件中查询数据，而电视频道对象看起来像{ "groupID": 16481, "hasMediathek": true, "storeUrlAndroid": null, "storeUrlApple": null, "liveWeb": "https://www.zdf.de/live-tv", "liveApp": null, "defaultOrder": 1000, "hdp": false, "quality": 2, "name": "ZDFneo HD", "isEncrypted": false, "isHD": false, "dvbTriplet": "dvb://0.0.0", "id": null, "major": true }

这通过其groupID连接到节目，在节目对象中显示为channelID。下面是show对象的示例

{
  "_id": "5b1f5c7da6cdf0cbbdb7e700",
  "showID": 892149863,
  "channelID": 16481,
  "title": "Masters of Sex",
  "subtitle": "Auf frischer Tat ertappt (Dirty Jobs)",
  "serie": {
    "no": "4",
    "title": "Auf frischer Tat ertappt",
    "seasonno": "2",
    "info": "Staffel 2 | Folge 4"
  }

这就是我查询渠道数据的方法

import stations from "../data/channels.json";
import data1 from "../data/1.json";
import data2 from "../data/2.json";
import data3 from "../data/3.json";
import data4 from "../data/4.json";
import data5 from "../data/5.json";
import data6 from "../data/6.json";


class Contents extends React.Component {
  constructor(){
    super();
    this.trans = this.trans.bind(this);
  }
  station = { ...stations };
  shows = { ...data1, ...data2, ...data3, ...data4, ...data5, ...data6 };
  trans(){
    Object.values(station.result.channels).map(value => {
      console.log(value["groupID"], "odgdggddgdd");
      return value["groupID"];
    });
  }
  render() {
    return (
      <Fragment>
        <TopNavBar />
        <BottomNavBar />
        <div className="row">
          <section className="left-menus">
            <div className="left-items">
              {Object.values(station.result.channels).map(value => (
                <div>
                  <img
                    src={`https://cdn.hd-plus.de/senderlogos/bright-cropped/${value["groupID"]}.png`}
                    alt=""
                  />
                </div>
              ))}
            </div>
          </section>
          
          <section className="item-center">
            
              {
                Object.values(shows.result).map(value => (
                  <div className="shows">{
                    <div className="grid-items">
                  <div className="item">
                    <small>{value.startime}</small>
                    <small>value.resolution</small>
                  </div>
                  <div className="item-name">{value.title}</div>
                  </div>
                  }
                
                </div>))}
            
          </section>
        </div>
      </Fragment>
    );
  }
}

export default Contents;

在将频道与各自的电台对齐时，我需要一些帮助。我希望这足够描述性。谢谢

磁贴的更新代码

<section className="item-center">

          {
            Object.values(station.result.channels).map(value => (

              <div className="shows">{
                shows.result.find(show => show['channelID'] === value['groupID']).map(item => (
              <div className="grid-items">
              <div className="item">
                <small>{item.startime}</small>
                <small>value.resolution</small>
              </div>
              <div className="item-name">{item.title}</div>
              </div>
                ))}

            </div>))}

      </section>

错误消息

当我尝试在其周围添加Object.values（）时，我得到了

Answer 1

对此的正确解决方案（如注释中所示）是使用filter（）函数。 find（）函数只会返回一个或未定义的对象，因此您不能在其上使用map。

shows.result.filter(show => show['channelID'] === value['groupID']).map(item => 
())

这将返回channelID等于groupID的每个对象，然后可以将其映射到ui元素。

https://www.w3schools.com/jsref/jsref_filter.asp

有没有一种方法可以根据json对象中的特定项目查询数据？

1 个答案: