Javascript 模板文字 - 检索子集合集

Question

我需要使用模板文字将数据集成到字符串中。我正在设法做到这一点，除非数据是 Collection.set 类型。

我的数据由一个名为 Company 的表组成，其中包含多条记录。我需要在其中循环以检索每个公司的数据(这一点没问题并且已经可以工作)，但是然后在每个公司内部名为 company_tags 的属性/列之一是 Collection.set 类型我需要循环(循环内的某种循环)来检索数据，以便将其注入(inject)到模板文字中，而这部分我未能做到。

Javascript代码

var html = "";
result.forEach(function(msg) {       
  console.log(msg);
  console.log(msg.company_tags);           
  msg.company_tags.forEach(function(value) {
    console.log(value);
  });

  html += `
    <tr id="company-1234" data-id="1234">
            <td class="name">              
                <h2>This is the company name ${msg.company_name}</h2> for which they agree to send an email to ${msg.company_email}
            <td class="location">              
               <h3> ${msg.company_location_city}</h3>
            </td>
            <td class="tags">              
                <h2>yhis is one of the company tags: <b>${msg.company_tags[i]} </b> and it looks nice</h2>          
            </td>
          </tr>  
        `;

      });
      document.getElementById("target").innerHTML = html;

当然是上面的部分<h2>This are the company tags: ${msg.company_tags[i]}不起作用。

我做了几次尝试来达到这个集合集，但都失败了。

上面代码中名为“msg”的全局数据来自第三方。为了向您展示我需要解析/循环/检索的数据结构，如下所示是您在上面的代码中看到的 console.log 的结果:

数据如下:这是上面代码中console.log显示的公司记录之一:

console.log(msg) 输出

c {createdAt: Wed Jul 04 2018 16:49:56 GMT+0200 (CEST), updatedAt: Mon Jul 09 2018 15:26:25 GMT+0200 (CEST), _metadata: d}
company_email: "companyemail1@example.com"
company_name: "example name"  
company_location : "Dublin" 
company_tags: Set(3)
updatedAt: and so on...
d {_isLocked: false, _readyPromise: Promise, _deferred: null, _root: c, _state: 0, …}

console.log(msg.company_tags) 输出一些我不确定完全理解的内容。好像就是所谓的Collection set。

Set(3) {"tag1", "improvement", "sexy"}
size : 3
__persistedSize__ : 3
__persistedState__: 
{tag1: "tag1", improvement: "improvement", sexy: "sexy"}
__proto__ : Set
[[Entries]] : Array(3)
  > 0 : "tag1"
  > 1 : "improvement"
  > 2: "sexy"
  length : 3 

今天，当我的 javascript 代码(见上文)运行时，我设法在 html 中为“字符串”类型的列显示正确的数据。所以下面的部分对我来说效果很好:

<h2>This is the company name ${msg.company_name}</h2> for which they agree to send an email to ${msg.company_email}

但是下面带有 Collection.set 类型列的部分不起作用并显示“未定义”

<td class="tags">              
                <h2>This is one of the company tags: ${msg.company_tags[i]}            
            </td>

就像我需要再次循环(在另一个loopForEach内)。

一些失败的尝试:

var html = "";
result.forEach(function(msg) {   
  html += `
    <tr id="company-67851" data-id="67851">
            <td class="name">              
                <h2>This is the company name ${msg.company_name}</h2> for which they agree to send an email to ${msg.company_email}
            <td class="location">              
               <h3> ${msg.company_location_city}</h3>
            </td>
            <td class="tags">              
                <h2>This is one of the company tags:  <b>${ msg.company_tags.forEach(function(value) {                   
                        <h2>value</h2>
                      </div>
                    </a>
                  });
                } </h2> and it looks nice           
            </td>
          </tr>  
        `;

      });
      document.getElementById("target").innerHTML = html;

我也尝试过

${ msg.company_tags.forEach( (k, v) => `<h2>${v}</h2>`).join(" ")  }

还有

${msg.company_tags.map(company_tag => <h2>This is one of the company tags: ${company_tag}</h2> and it looks nice`).join('')}

但我总是收到 UNDEFINED 错误，甚至有时会出现错误 Uncaught (in promise): TypeError: .map is not a function

到目前为止还没有任何效果。作为一个 javascript 菜鸟，这有点超出我的理解范围。

我的目标是，例如，我在 html 中看到我上面给出的记录示例:

<td class="tags">              
  <h2>This is one of the company tags: <b>tag1</b> and it looks nice</h2> 
  <h2>These are the company tags: <b>imrovement</b> and it looks nice</h2> 

  <h2>These are the company tags: <b>sexy</b> and it looks nice</h2>                        
</td>

Answer 1

似乎您需要将 msg.company_tags 设置转换为数组:

var company_tags = []
msg.company_tags.forEach((k,v) => company_tags.push(v))

那么您应该能够对其进行map而不是forEach，因为只有map从函数forEach返回> 用于副作用。您还可以将公司标签的生成提取到单独的函数中。

${company_tags.map(company_tag => `<h2>This is one of the company tags: ${company_tag}</h2> and it looks nice`).join('')}