Блог

Создавая скрипт чата, я пытаюсь извлечь данные из своего URL-адреса api. Я попытался выполнить цикл, но по какой-то причине данные не могут прочитать ни одно из свойств.

JS

 fetch('https://api.myjson.com/bins/1geede')
.then(response => response.json())
.then(function(data) {

    headerDate (getWeekDay(getDateNow(data.data.conversationDate).getDay())   ','   getMonth(getDateNow(data.data.conversationDate).getMonth())   getDateNow(data.data.conversationDate).getDate()   ', '   ((getDateNow(data.data.conversationDate).getYear())   1900))

    const scope = data.data.messages;

    scope.forEach((i) => {

        let user = scope[i];

        if (user.username == 'Mygel van Trable') {
            user1( user.focused, user.image, user.message, getTimeStamp(user.timestamp), user.username);
        } else {
            user2( user.focused, user.image, user.message, getTimeStamp(user.timestamp), user.username);
        }

    console.log(user);

    });


});

const user1 = (focused, image, message, timestamp, username) =>  {

    $('.chat').innerHTML  = 

    '<div class="chat-log user1">'  
    '<ul>'  
    '<li class="avatar">'  
    '<img src="'  image   '" alt="Mygel van Trable">'  
    '</li>'  
    '<span class="chat_arrow_left"></span>'  
    '<li class="message">'  
    '<li class="message-box">'  
    '<p class="text"> '   message   '</p>'  
    '<ul class="text-bottom">'  
    '<ul class="user-name">'   username   '</li>'  
    '<li class="timestamp">'  
    '<ul>'   
    '<li class="clock-icon">'  
    '<img src="./img/clock.png" alt="clock-icon">'  
    '<li class="time">'   '<p>'   timestamp   '</p>'   '</li>'  
    '</ul>'  
    '</li>'  
    '</ul>'  
    '</div>'  
    '</li>'  
    '</ul>'  
    '</div>';



}

const user2 = (focused, image, message, timestamp, username) => {



    $('.chat').innerHTML  = 

    '<div class="chat-log user1">'  
    '<ul>'  
    '<li class="avatar">'  
    '<img src="'  image   '" alt="Mygel van Trable">'  
    '</li>'  
    '<span class="chat_arrow_left"></span>'  
    '<li class="message">'  
    '<li class="message-box">'  
    '<p class="text"> '   message   '</p>'  
    '<ul class="text-bottom">'  
    '<li class="timestamp">'  
    '<ul>'   
    '<li class="clock-icon">'  
    '<img src="./img/clock.png" alt="clock-icon">'  
    '<li class="time">'   '<p>'   timestamp   '</p>'   '</li>'  
    '<ul class="user-name">'   username   '</li>'  
    '</ul>'  
    '</li>'  
    '</ul>'  
    '</div>'  
    '</li>'  
    '</ul>'  
    '</div>';


}

const headerDate = (date) => {
    $('.header-date').innerHTML = date;
}


const getDateNow = (date) => {
    return new Date(date);
}

const getWeekDay = (week) => {

    let weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

    return weekDays[week];
}

const getMonth = (month) => {
    let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    return months[month];
}

const getTimeStamp = (time) => { 

    let timeNow = getDateNow(time);
    let hour = timeNow.getHours();
    let minute = timeNow.getMinutes();

    let day = 'AM';

    switch (time) {
        case hour > 11 : day = 'PM';
        break;
        case hour > 12 : hour = hour - 12;
        break;
        case hour == 0 : hour = 12;
        break;
        case hour < 10 : hour = "0"   hour;
        break;
        case minute < 10 : minute = "0"   minute;
        break;

    }

    const timeStamp = hour   ':'   minute   " "   'day';

    return timeStamp;

}

const $ = (className) => {
    return document.getElementsByClassName(className);
}
  

Я с трудом пытаюсь выполнить цикл по массиву с помощью файла api json, и мне не удается выполнить это. Цель состоит в том, чтобы добавить данные в HTML-файл.

 scope.forEach((i) => {
    let user = scope[i];   <-- Wrong
});
  

это неправильно, «i» — это не индекс, а фактический объект в массиве.

 scope.forEach((i) => {
  let user = i
});
  

это можно сделать другими способами, чтобы

 for (const user of scope) {...}
  

или

 for(let i = o ; i<scope.length; i  } {const user = scope[i] ...}