is there a way to query data based on a particular item from a json object?

Question

I have user interface which looks should look like this

and that picture above is just pure HTML.

So when I tried to create it with React, I am failing to align the tv shows with a particular TV channel overflowing horizontally as per the channel.

Picture of what I get in React

I am querying the data from json files that have the objects and the TV channel object looks like { "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 }

this is connected to the shows through its groupID which shows up as channelID in the shows Object. Below is a sample for the shows object

{
  "_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"
  }

this what I have done to query the data for channels

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;

I need some help with aligning the channels with their respective stations. I hope this is descriptive enough. Thank you

Updated Code for the tiles

<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>

error message

when I try to add Object.values() around it I get this

Answer 1

The correct solution for this (as found in the comments) is to use the filter() function. a find() function would only give back one object, or undefined, so you cannot use map on it.

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

This will return every object where the channelID equals the groupID, which you can then map to a ui element.

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