个人中心
gpt4 book ai didi

javascript - 如何从具有连接的 html+object 值的变量传递函数参数？

转载 作者：行者123 更新时间：2023-12-01 03:57:40 25 4
gpt4 key购买 nike

我正在尝试创建一个函数，自动使用 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 feed，它获取 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) 的增量“索引”(0,1,2,3 等)参数传递给 createTweets(item, index) 然后传递给对象数组变量' text' 例如 json[index].user.name;

如果我删除文本变量中的所有串联并将其简单地设置为 

let text = json[index].user.name

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

最佳答案

连接文字字符串是 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>

关于javascript - 如何从具有连接的 html+object 值的变量传递函数参数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61523472/

25 4 0
文章推荐： asp.net-mvc - 在 Controller 中使用 "HttpPost"时无法找到资源错误
文章推荐： javascript - mailto 正文中的链接被切断
文章推荐： audio - TravisCI 没有音频设备
文章推荐： javascript - 获取内容可编辑元素内的选定文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com