Нужна помощь для добавления содержимого массива javascript в существующий фрагмент кода HTML - PullRequest
Новая
       2

Нужна помощь для добавления содержимого массива javascript в существующий фрагмент кода HTML

0 голосов
/ 19 марта 2020

Мои навыки переднего конца довольно ограничены. У меня есть обученная языковая модель, которая генерирует твиты. У меня есть функция javascript, которая в настоящее время отображает твиты в виде абзаца. 

function addResponse(msg) {
    document.getElementById("results").textContent = ""
    var para = document.createElement("div");
    var s = "<div class='center' id='gpt2'> <b> Here what our BOT has to say... </b> </br></br>"

     i = 1
     for (var key in msg){
         var value = msg[key];
         console.log(value);
         s = s + i + ") " + " <b>" + value + "</b> </br></br>"
         i = i + 1
     }
    para.innerHTML = s + "</div>";
    document.getElementById('append').appendChild(para);
  }

Вместо отображения в абзаце, я хочу отобразить как правильный твит. Вот реализация CSS попутного ветра для создания пользовательского интерфейса твита: https://codepen.io/webcrunchblog/pen/xedQVv

В настоящее время отображается фиксированная строка «Starhopper». Что я хочу сделать, это l oop через мой объект массива 'msg' и отобразить все твиты с соответствующим пользовательским интерфейсом.

В настоящее время addResponse () вызывается как часть ajax обратного вызова для успешного ответа. Оттуда, как я могу включить код попутного ветра CSS, чтобы я мог отображать каждый элемент массива в своем собственном интерфейсе твита? Надеюсь, что вопрос ясен.

РЕДАКТИРОВАТЬ: создал этот код ручки, если кто-то хочет попробовать его: https://codepen.io/nikhilno1/pen/RwPBWvb В выводе есть твит и три предложения. Я хочу, чтобы для каждого предложения было создано 3 твита.

1 Ответ

1 голос
/ 19 марта 2020

Я обновил немного вашего кода здесь: https://codepen.io/rxna/pen/OJVwMOm

Идея состоит в том, чтобы:

Клонировать элемент твита, добавили пользовательский класс для этого:
var articleNode = document.querySelector(".tweet-body"); var clone = articleNode.cloneNode(true);

Обновите текст в каждом элементе:
var title = clone.querySelector(".tweet-text"); title.innerText = value;

И, наконец, добавьте в DOM:
document.getElementById("append").appendChild(clone);

Это не идеально, но, надеюсь, вы поймете идею.

...