J'essaie de créer une fonction qui remplit automatiquement un div de flux Twitter sur la page avec l'ID de #feed.

C'est le code du problème.

          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);

J'imagine que le problème est assez simple mais j'ai du mal à le résoudre. Tout le reste fonctionne bien comme si je ne faisais que la variable

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

Fonctionne parfaitement.

Toute aide très appréciée.

Mise à jour:

Je suis désolé si cela est difficile à comprendre, je ne sais pas comment l'expliquer mieux.

J'essaie de créer un fil Twitter très simple qui récupère le contenu du point de terminaison home_timeline et affiche uniquement les tweets avec un nombre de favoris supérieur à 2.

Code 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);
          }

Enfin, ce sont les erreurs que j'obtiens dans ma console Google.

Exécution de json.forEach (createTweets); Retour

undefined

Ce que je suppose, c'est parce qu'il ne passe pas le paramètre incrémentiel "index" (0,1,2,3 etc) de forEach (item, index) pour createTweets (item, index), puis à la variable de tableau d'objets 'text' exemple json [index] .user.name;

Si je supprime toute la concaténation dans la variable texte et que je l'ai simplement comme

let text = json[index].user.name 

Il renvoie la valeur que j'attends, qui est le user.name à chaque point d'index du tableau json.

1
Dyneskye 30 avril 2020 à 15:32

2 réponses

Meilleure réponse

La concaténation des chaînes littérales est si 2014 - utilisez Template Literal syntaxe à la place. Quant à ce qui ne va pas ... vous n'avez pas expliqué exactement ce que c'était. À partir de quel code est fourni, cela devrait fonctionner à moins que les données en cours de traitement ne soient défectueuses. Il n'y a pas d'exemple de JSON - cela nous aiderait si nous savions comment la variable json est structurée.


La démo suivante est du simple JavaScript. J'ai deviné comment json est structuré.

Démo

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>
1
Community 20 juin 2020 à 09:12

Le problème est votre 'ht' 'ml' multiligne. Cela ne marche pas. Vous avez oublié les avantages! La manière ES6 est:

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);
          }

Regardez MDN: https://developer.mozilla.org/ fr-FR / docs / Web / JavaScript / Reference / Template_literals

1
user13268210user13268210 30 avril 2020 à 13:18