Question

所以我现在对我的javascript感到困惑，这是一个相对简单的任务;获取JSON值作为数据属性来填充模态。我对这些东西很新！代码适用于段落部分，但不适用于标题。

我的目标是遍历JSON，并将header和paragraph中的值配对到data-attributes中。然后我可以使用这些来显示模态中的值。

我的JSON结构：

var tableEntries = [
      {
          category : "learning",
          start : 8,
          end : 9,
          duration: 1,
          header : "Title of the modal", 
          paragraph : "Content of modal"
      },{
          category : "learning",
          start : 10,
          end : 11,
          duration: 1,
          header : "Title of the modal 2", 
          paragraph : "Content of modal 2"
      }];

现在我有一个简单的函数来获取标题：

function getHeader(header) {
      return '<h5 class="modalheader">'+ header + '</h5>';
  };

但是在我尝试使用另一个函数中的头部的JSON值后，我无法得到它，它返回undefined

function createLinkforModal(paragraph, header) {

      return '<div class="readmore"><a href="#modal" data-target="#paragraph" class="openModal" id="openModal" data-toggle="modal" data-id=" '+paragraph+' " data-header="'+header+'">Read more &raquo;</a></div>'; }

我可以获取此函数中的所有值但是标题，我无法确定JSON中标题和段落之间的不同之处？

我只能通过控制台记录获得一个标题，现在它只打印2次，因为我有2个值（循环正常工作）

console.log(tableEntries[1].header);

当我记录段落时，它按预期工作。但是当我在这个标题下面记录标题时，它是未定义的。

console.log(paragraph);
console.log(header);

以下是我如何使用带有数据属性的bootstrap进行模态。

$(document).ready(function(){

      $("#paragraph").on("show.bs.modal", function(evt) {
        var $btn = $(evt.relatedTarget);
        var $modal = $(evt.target);
        var $header = $modal.find(".modal-header");
        var $content = $modal.find(".modal-body");

        $header.text($btn.data("header") );
        $content.text( $btn.data("id") );
    });
});

同样只是循环函数内部的头文件，但我会得到多个循环，因为它是一个嵌套循环。我不确定如果段落已经按原样运行，我需要像这样循环它们吗？

for(var i = 0;i < tableEntries.length;i++){
        (function(){
            var ii = i;
            //console.log(tableEntries[ii].header);
        })();
      }

我一直在研究JSON.parse（），但无济于事。而且，因为我显然不需要为段落执行此操作，为什么我需要为标题？ //编辑1

console.log(JSON.parse(header));

这让我：

Uncaught SyntaxError: Unexpected token

EDIT // 2

我可以使用它将所有标题放入函数外的数组中：

var headers = [];

        $.each(tableEntries, function(index, value) {
            if ($.inArray(value.header, headers )==-1) {
                headers.push(value.header);
            }
        });

但接下来我将如何在我的函数中循环这些内容，并保持标题和段落完好无损，就像在正确的配对中一样？此外，我仍然不明白为什么段落的工作原理，但我需要这样做只是标题？

Answer 1

如果您拨打以下电话，header将为undefined，因为您尚未传递第二个参数

createLinkforModal(tableEntries[1].paragraph);

应该是

createLinkforModal(tableEntries[1].paragraph, tableEntries[1].header);

然后你调用console.log(JSON.parse(header));并得到错误，因为header不是变量，它的函数参数或私有变量只能在你的函数中访问

Answer 2

说明

TableEntries是array，您可以基本循环它以获取其中的所有objects。

解决方案

您的functions工作正确无误。我没有修改它们。

var tableEntries = [
  {
    category : "learning",
    start : 8,
    end : 9,
    duration: 1,
    header : "Title of the modal", 
    paragraph : "Content of modal"
  },
  {
    category : "learning",
    start : 10,
    end : 11,
    duration: 1,
    header : "Title of the modal 2", 
    paragraph : "Content of modal 2"
  }
]

function getHeader(header) {
  return '<h5 class="modalheader">'+ header + '</h5>';
}

function createLinkforModal(paragraph, header) {
  return '<div class="readmore"><a href="#modal" data-target="#paragraph" class="openModal" id="openModal" data-toggle="modal" data-id=" '+paragraph+' " data-header="'+header+'">Read more &raquo;</a></div>'; 
}

for (var i = 0; i < tableEntries.length; i++) {
  var header = tableEntries[i].header
  var paragraph = tableEntries[i].paragraph
  console.log(getHeader(header))
  console.log(createLinkforModal(paragraph, header))
  document.querySelector('#tableEntries').innerHTML += createLinkforModal(paragraph, header)
}

<div id="tableEntries"></div>

Answer 3

尝试这种方法：

var tableEntries = [
      {
          category : "learning",
          start : 8,
          end : 9,
          duration: 1,
          header : "Title of the modal", 
          paragraph : "Content of modal"
      },{
          category : "learning",
          start : 10,
          end : 11,
          duration: 1,
          header : "Title of the modal 2", 
          paragraph : "Content of modal 2"
      }];
      
for (var i in tableEntries) {
	var res = createLinkforModal(tableEntries[i].paragraph, tableEntries[i].header);
  console.log(res);
}

function createLinkforModal(paragraph, header) {
      return '<div class="readmore"><a href="#modal" data-target="#paragraph" class="openModal" id="openModal" data-toggle="modal" data-id=" '+paragraph+' " data-header="'+header+'">Read more &raquo;</a></div>'; 
};

结果：

当在同一函数

3 个答案:

说明

解决方案