如何从具有串联html + object值的变量中传递函数参数？

达因斯基：

我正在尝试创建一个自动将ID为#feed的页面上的Twitter feed div填充的函数。

这是问题代码。

          function createTweets(item, index) {
            let text = '<div class="tweet">'
              '<img class="float" src=\"' + json[index].user.profile_image_url_https + '\" alt="">'
              '<span class="float name"><strong>' + json[index].user.name + '</strong></span>'
              '<span class="username float">@' + json[index].user.screen_name + ' · </span>'
              '<span class="postTime float"></span>'
              '<p class="text">' + json[index].text + '</p>'
              '<hr>'
            '</div>';

            $('#feed').append(text);
          }
json.forEach(createTweets);

我认为问题很简单，但我很难弄清楚。一切正常，就好像我只是将文本变量

let text = json[index].user.name // or any other combination

绝对可以。

任何帮助，不胜感激。

更新：

很抱歉，这很难理解，我不知道如何更好地解释。

我正在尝试创建一个非常简单的Twitter提要，该提要获取home_timeline端点的内容并仅显示收藏夹计数> 2的推文。

PHP代码：

<?php 

    require "twitteroauth/autoload.php";

    use Abraham\TwitterOAuth\TwitterOAuth;

    $consumerkey = "?";
    $consumersecret = "?";
    $access_token = "?";
    $access_token_secret = "?I";

    $connection = new TwitterOAuth($consumerkey, $consumersecret, $access_token, $access_token_secret);
    $content = $connection->get("account/verify_credentials");

    $obj = $connection->get("statuses/home_timeline");

    $len = count((array)$obj);

    if (gettype($obj) == 'object')
    {
      print_r($obj->errors);
    } elseif (gettype($obj) == 'array')
    {
      $p = 0;
        for ($i = 0; $i < $len; $i++) 
        {
          if ($obj[$i]->favorite_count > 2) 
          {
            $favouriteTweets[$p] = $obj[$i];
            $p++;
          } 
        } 
    }


    ?>

html / css

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <style type="text/css">

        html {
          font-size: 62.5%;
        }



        h1 {
          margin-top: 15px;
          font-size: 3.5rem;
        }

        #feed {
          margin-top: 40px;
        }

        .tweet {
          border: 1px solid black;
          margin: 0 auto;
          width: 50%;
          height: 100px;
        }

        .tweet img {
          margin: 5px 0 0 5px;
          border-radius: 50%;
        }

        .name {
          margin: 5px 0px 0px 10px;
          font-size: 1.75em;
        }

        .float {
          float: left;
        }

        .username {
          margin: 10px 0px 0px 5px;
          color: #8C8D8F;
          font-size: 1.3em;
        }

        .postTime {
          margin: 10px 0 0 5px;
          font-size: 1.3em;
        }

        .text {
          position: relative;
          top: -20px;
          margin: 0 auto;
          clear:both;
          width: 70%;
          font-size: 1.5em;
        }

    </style>
  </head>
  <body>



    <div class="container text-center">
        <h1>If this was my feed, I'd have anorexia.</h1>

        <div id="feed">
            <div class="tweet">
              <img class="float" src="<? echo $favouriteTweets[0]->user->profile_image_url_https; ?>" alt="">
              <span class="float name"><strong><? echo $favouriteTweets[0]->user->name ?></strong></span>
              <span class="username float">@<? echo $favouriteTweets[0]->user->screen_name; ?> · </span>
              <span class="postTime float"></span>
              <p class="text"><? echo $favouriteTweets[0]->text; ?></p>
              <hr>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

JS：

<script type="text/javascript">


        var json = <? echo json_encode($favouriteTweets); ?>;

          function createTweets(item, index) {
            let text = '<div class="tweet">'
              '<img class="float" src=\"json[index].user.profile_image_url_https + '\" alt="">'
              '<span class="float name"><strong>json[index].user.name</strong></span>'
              '<span class="username float">@' + json[index].user.screen_name + ' · </span>'
              '<span class="postTime float"></span>'
              '<p class="text">' + json[index].text + '</p>'
              '<hr>'
            '</div>';

            $('#feed').append(text);
          }

最后，这些是我在Google控制台中遇到的错误。

运行json.forEach（createTweets）; 退货

undefined

我认为是因为它没有将forEach（item，index）的增量“ index”（0、1、2、3等）参数传递给createTweets（item，index），然后传递给对象数组变量'text'示例json [index] .user.name;

如果我删除了text变量中的所有串联，并简单地将其作为

let text = json[index].user.name

它返回我期望的值，它是json数组中每个索引点的user.name。

zer00ne：

2014年是串联文字字符串的原因-请改用Template Literal语法。至于出了什么问题……您还没有确切解释那是什么。根据提供的代码，除非正在处理的数据有问题，否则它应该起作用。没有JSON的示例-如果我们知道变量json的结构，它将帮助我们为您提供帮助。

以下演示是纯JavaScript。我猜想如何json构造。

演示版

let json = [
  {user: {name:"zer0", alias: "zer00ne", img: "https://i.ibb.co/Hdyh0V0/wa2813224.png"}, text: "I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail."},
{user: {name: "Dyn", alias: "Dyneskye", img: "https://www.gravatar.com/avatar/6bdb83995e21f4272dc5e8253f8137f1?s=328&d=identicon&r=PG&f=1"}, text: "How do I pass function parameters from a variable with concatenated html+object values?"}
];

function createTweets(array) {
  const feed = document.querySelector('#feed');
  array.forEach(item => {
    let html = `<figure class="tweet">
      <img class="avatar" src="${item.user.img}" alt="avatar" width='100'>
      <section class='nfo'>
      <fieldset>
      <legend class="username">
      ${item.user.name}</legend>
      <i class="useralias">
      @${item.user.alias}</i>
      </fieldset>
      <time class="timestamp">
        ${new Date(Math.floor(Date.now() / 1000) * 1000).toLocaleString()}</time>
      </section>
      <figcaption class="message">
      ${item.text}</figcaption>
      </figure>`;
    feed.insertAdjacentHTML('beforeend', html);
  });
}

createTweets(json);

:root,
body {
  font: 400 4vh/1.5 Verdana;
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

.tweet {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 96%;
  margin: 0 auto;
  padding: 4px 12px;
  border-bottom: 3px ridge #000;
}

.avatar {
  display: block;
  width: 10rem;
  padding: 4px 0;
}

.nfo {
  align-self: start;
  flex: 0 1;
  padding: 0 5px;
}

.username {
  font-weight: 900;
  font-size: 1.2rem;
}

.useralias {
  font-size: 1.2rem;
}

.timestamp {
  display: block;
  font-family: consolas;
  margin: 0 5px;
  white-space: pre-line;
}

.message {
  flex: 1.5 0;
}

<main id='feed'></main>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-05-3

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章

如何从具有串联html + object值的变量中传递函数参数？

如何从具有串联html + object值的变量中传递函数参数？

演示版

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何检查字符串输入的格式

检查嵌套列表中的长度是否相同

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何自动选择正确的键盘布局？-仅具有一个键盘布局

如何正确比较 scala.xml 节点？

在令牌内联程序集错误之前预期为 ')'

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

解决类Koin的实例时出错

ES5的代理替代

有什么解决方案可以将android设备用作Cast Receiver？

VBA 自动化错误：-2147221080 (800401a8)

套接字无法检测到断开连接