Question

我遇到了一个真正困扰我的问题。我试图谷歌的问题，但没有运气。我得到了以下代码，我想将特定节点应用于DOM，从数组中获取信息。 while循环可以很好地工作，但是当涉及到“ for”循环时，东西变得时髦了。我想使用“ bitValues”数组中的“ collection_id”对“ collectionValues” id进行过滤。应该应用的信息如下：

    var bitValues = [{
                    'id': 1,
                    'collection_id': 1,
                    'description': "Amazing description",
                    'radio': "ANR",
                    'date': "01-01-2018",
                    'time': "11:45:00",
                    'seconds': 10,
                    'delta': '8.5',
                    'gain_loss': '2',
                    'total_listeners': '13.343',
                    'delta_listeners': '22.340',
                }, {
                    'id': 2,
                    'collection_id': 2,
                    'description': "DR P3 music is amazing",
                    'radio': "DR P3",
                    'date': "05-01-2018",
                    'time': "13:45:00",
                    'seconds': 16,
                    'delta': '12',
                    'gain_loss': '82',
                    'total_listeners': '15.343',
                    'delta_listeners': '102.340',
                },
                {
                    'id': 3,
                    'collection_id': 2,
                    'description': "Let's go!",
                    'radio': "Nova FM",
                    'date': "25-01-2018",
                    'time': "23:45:00",
                    'seconds': 126,
                    'delta': '53',
                    'gain_loss': '17',
                    'total_listeners': '28.343',
                    'delta_listeners': '22.340',
                }
            ];

let collectionValues = [{
                'id': 1,
                'demographic': "All females",
                'delta': "19.5",
                'gain_loss': "62.126",
                'total_listeners': '43.343',
                'delta_listeners': '22.340',
                bits: bitValues
            }, {
                'id': 2,
                'demographic': "All 12-24",
                'delta': "10.5",
                'gain_loss': "52.126",
                'total_listeners': '153.343',
                'delta_listeners': '132.340',
                bits: bitValues
            }];

要应用数据的jQuery如下所示：

    while (i < collectionAmount) {
        (Code that works)...

        for (let n = 0; n < bitAmount; n++) {

           collection_id = collectionValues[i].id;
           bit_reference_id = bitValues[n].collection_id;

           if(collection_id == bit_reference_id) {
       $('.freestyle-deltas_details_bits').append(`
<tr>
                                                            <td><span 
    class="font-weight-bold">Bit
                                                                        ${bitValues[n].id}: </span>(
                                                                        ${bitValues[n].time}, ${bitValues[n].seconds} sec)</td>
                                                                    <td><span class="colorChangeByValueDelta">${bitValues[n].delta}%</span></td>
                                                                    <td><span class="colorChangeByValueGainLoss">${bitValues[n].gain_loss}%</span></td>
                                                                    <td>${bitValues[n].total_listeners}</td>
                                                                    <td>${bitValues[n].delta_listeners}</td>
                                                            </tr>
                                                        `);
                                                        }
                                                    };
    i++;
    }

有人可以帮助解决这个问题吗？谢谢！

Answer 1

极好的时间使用双重过滤！这就是为什么我喜欢Javascript。

const result = first.filter（firstId => second.filter（secondId => firstId.id === secondId.id））

过滤器的作用是遍历数组中的所有元素并对其应用逻辑。由于filter将函数作为参数，因此这是在其上应用第二个过滤的理想方法。

如果将bitValues用作第一个数组，则最终将得到一个列表，其中包含bitValues中与collectionValues相匹配的对象。

Answer 2

 let table = document.createElement("table");//creating a table element
 $(table).append("<tr></tr>");// inserting a row element in the table
 let head = table.getElementsByTagName("tr")[0];// selecting the row elment previously selected
 for(key in bitValues[0]){//looping through all keys in the object
     $(head).append(`<th>${key}</th>`);// putting each key as a head in the first row of the table
 }
 $(table).append("<tbody></tbody>")// creating a table body
 for(row of bitValues){// looping through each object in bitValues array
      let tr = document.createElement("tr");// creating a row for each object in the array
      for(x in row){// looping through each key of an object in the array
         $(tr).append(`<td>${row[x]}<td>`);// putting the value of each key in a td tag and appending it to tr
      }
      table.appendChild(tr);// appending the tr to the table
 }
 $('.freestyle-deltas_details_bits').append(table);

希望有帮助

Answer 3

尽管我不知道task fatJar(type: Jar) { manifest { attributes 'Implementation-Title': 'Jar File creation', 'Implementation-Version': version, 'Main-Class': 'com.group.me.name.MyJarClass' } baseName = project.name + '-all' from { configurations.compile.collect { it.isDirectory() ? it : zipTree(it) } } with jar exclude 'META-INF/*.RSA', 'META-INF/*.SF','META-INF/*.DSA' }是什么，但我猜想这只是collectionAmount中的项目数。

您想要的是一种方法，仅从collectionValues中渲染那些具有bitValues的项目，这些项目对应于当前正在处理的集合的collection_id，对吗？在这种情况下，请使用id和filter。由于您可以通过在reduce内添加简单的filter来松动if-else，因此只需使用reduce。

首先，让我们清理一点并将模板移至其自身的功能中：

reduce

现在比较棘手了，它将立即从/* template */ const bitValueTemplate = data => `<tr> <td> Bit ${data.id}: (${data.time}, ${data.seconds} sec) </td> <td> ${data.delta}% </td> <td> ${data.gain_loss}% </td> <td>${data.total_listeners}</td> <td>${data.delta_listeners}</td> </tr>`;的列表中构建一个完整的HTML字符串（这意味着它包含多个bitValues元素）：

<tr>

好，是时候尝试了：

  /* renders a list into a simple string, only adds items where a certain
  property has a certain value. uses a template function/render function to
  render each item, then adds it to the end of the overall string. returns
  the complete string when finished */
  const renderByPropWith = (prop, value, renderFn, xs) => {
    return xs.reduce((html, x) => {
      if (x[prop] === value) {
        return html + renderFn(x);
      }
      return html;
    }, '');
  }

彼此之间有多个for循环

3 个答案: