Я пытаюсь создать функцию, которая автоматически заполняет div твиттера на странице с идентификатором # feed.
Это код проблемы.
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
, что, как я полагаю, связано с тем, что он не передает инкрементный параметр "index" (0,1,2,3 et c) forEach (item, index) в createTweets (item, index), а затем к переменной массива объектов 'text', например, json [index] .user.name;
, если я удалю всю конкатенацию в текстовой переменной и просто получу ее как
let text = json[index].user.name
возвращает ожидаемое мной значение, которое является user.name в каждой точке индекса в массиве json.