Question

我需要使用模板文字将数据集成到字符串中。我正在尝试执行此操作，但当数据的类型为Collection.set时。

我的数据由一个名为 Company 的表构成，具有多个记录。我需要在其内部循环以检索每个公司的数据（此位还可以，并且已经可以使用），但是然后在每个公司内部，称为 company_tags 的属性/列之一就是Collection.set的类型。我需要循环（循环内的某种循环）来检索数据，以便将其注入模板文字中，而这部分我做不到。

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）输出我不太了解。好像是所谓的收藏集。

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('')}

但是我总是收到不确定的错误，甚至有时 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('')}

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

1 个答案: