Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 29.08.2022, 10:46
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 47

Как это записать проще с помощью foreach или for?
const recursiveList = ((ul, li, data, color = {"2323856" : "#767474", "wait" : "#E51012", "ok" : "#1DDD32"}) => {
            const html = Object.entries(data).map(([key, value]) => {
                const item = li.cloneNode();
                item.textContent = `[${key}]`;
                i++;
                console.log(i);
                if(key === "id") 
                {
                  //console.log(value);
                  item.style.backgroundColor = color[value];
                }
                if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
                value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
                item.append(value);
                return item;
            });
            const list = ul.cloneNode();
            list.append(...html);
            return list;
        }).bind(null, document.createElement("UL"), document.createElement("li"));
Ответить с цитированием
  #12 (permalink)  
Старый 29.08.2022, 10:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,298

Olga27,
оно уже проще.
Ответить с цитированием
  #13 (permalink)  
Старый 29.08.2022, 11:53
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 47

Я задала вопрос, как перекрасить некоторые элементы сравнивая их по ID.

Вот мой вопрос: https://javascript.ru/forum/misc/843...ovpadayut.html.

Ответ я так и не получила. Решила попробовать разобраться. Думаю если будет через цикл то будет проще.
Ответить с цитированием
  #14 (permalink)  
Старый 29.08.2022, 14:23
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 47

Установила setAttribute, чтобы через этот параметр ссылаться.
const recursiveList = ((ul, li, data, color = {"2323866" : "#1DDD32", "wait" : "#E51012", "ok" : "#1DDD32"}) => {
            const html = Object.entries(data).map(([key, value]) => {
                const item = li.cloneNode();
                item.setAttribute("param", value);
                item.textContent = `[${key}]`;
                output.innerHTML = li;
                i++;
                //console.log(i);
                if(key === "id") 
                {
                  
                }
                if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
                value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
                item.append(value);
                return item;
            });
            const list = ul.cloneNode();
            list.append(...html);
            return list;
        }).bind(null, document.createElement("UL"), document.createElement("li"));

Но получить данные к тегу li через querySelectorAll не получается.
document.querySelectorAll("li");

querySelectorAll работает только со статическими данными. Как получить динамические данные созданные при работе скрипта?
Ответить с цитированием
  #15 (permalink)  
Старый 29.08.2022, 14:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,298

Сообщение от Olga27
Вот мой вопрос:
не могу помочь.
Ответить с цитированием
  #16 (permalink)  
Старый 29.08.2022, 15:10
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 47

Цитата:
не могу помочь.
Но querySelectorAll только что созданного списка можно как-то вызвать? При по пытке это сделать, я получаю "NodeList" без каких-либо данных.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>Example Json</title>
<style>
body {
  font-family: sans-serif;
  
}
#output{background-color:rgba(194,194,194,0.6);position:fixed;top:15px;right:115px;z-index:2;} 

</style>

</head>

<body>

<div id="output">
<strong>true</strong>
</div>

 <div id="tree"></div>


<script>
var bool = false;
var Index1 = 0;
var jsontent;

var bool = false;


var posts;

var output = document.getElementById('output');

var i = 0;


let data = {
              "response":[
                  {
                    "title":"Пост № 1",
                    "status":"current",
                    "id":2323866,
                    "text":"Тут должен появиться ёжик!",
                    "photo":[
                      {
                        "big":
                          {
                            "status":"current",
                            "width":772,
                            "height":960,
                            "url":"https://site.ru/image/big_1_1.jpg",
                            "id":457370052,
                            "post_id":2323866
                           },
                          "small":
                           {
                            "status":"wait",
                            "width":105,
                            "height":130,
                            "url":"https://site.ru/image/small_1_1.jpg"
                           }
                       }
                     ]
                   },
                   {
                      "title":"Пост № 2",
                      "status":"wait",
                      "id":2323856,
                      "text":"Прирoдa творит чудеса\n\nБерегите животных",
                      "photo":[
                        {
                          "big":
                            {
                              "status":"wait",
                              "width":728,
                              "height":712,
                              "url":"https://site.ru/image/big_2_1.jpg",
                              "id":457370045,
                              "post_id":2323856
                            },
                            "small":
                            {
                              "status":"wait",
                              "width":130,
                              "height":127,
                              "url":"https://site.ru/image/small_2_1.jpg"}
                            },
                            {
                            "big":
                             {
                               "status":"wait",
                               "width":728,
                               "height":728,
                               "url":"https://site.ru/image/big_2_2.jpg",
                               "id":457370046,"post_id":2323856
                             },
                             "small":
                             {
                              "status":"wait",
                              "width":130,
                              "height":130,
                              "url":"https://site.ru/image/small_2_2.jpg"}
                             },
                            {
                             "big":
                             {
                              "status":"wait",
                              "width":755,
                              "height":943,
                              "url":"https://site.ru/image/big_2_3.jpg",
                              "id":457370047,"post_id":2323856
                             },
                             "small":
                             {
                              "status":"wait",
                              "width":104,
                              "height":130,
                              "url":"https://site.ru/image/small_2_3.jpg"
                             }
                            },
                            {
                              "big":
                              {
                                "status":"wait",
                                "width":728,
                                "height":409,
                                "url":"https://site.ru/image/big_2_4.jpg",
                                "id":457370048,
                                "post_id":2323856
                              },
                              "small":
                              {
                                "status":"wait",
                                "width":130,
                                "height":73,
                                "url":"https://site.ru/image/small_2_4.jpg"
                              }
                            },
                            {
                              "big":
                              {
                                "status":"wait",
                                "width":728,
                                "height":656,
                                "url":"https://site.ru/image/big_2_5.jpg",
                                "id":457370049,
                                "post_id":2323856
                              },"small":{"status":"wait","width":130,"height":117,"url":"https://site.ru/image/small_2_5.jpg"}
                           }]}
                  ]
               };


/*

var recursiveList = (function(ul, li, data, color = {"current" : "#767474", "wait" : "#E51012", "ok" : "#1DDD32"}) {
    const html = Object.entries(data).map(([key, value]) => {
                const item = li.cloneNode();
                item.textContent = `[${key}]`;
                console.log(key);
                if(key === "attachments") item.style.backgroundColor = color[value];
                if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
                value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
                item.append(value);
                return item;
            });
            const list = ul.cloneNode();
            list.append(...html);
            return list;
}).bind(null, document.createElement("UL"), document.createElement("li")); 

//alert(factorial(5)); 
*/
var i = 0;
const recursiveList = ((ul, li, data, color = {"2323866" : "#1DDD32", "wait" : "#E51012", "ok" : "#1DDD32"}) => {
            const html = Object.entries(data).map(([key, value]) => {
                const item = li.cloneNode();
                item.setAttribute("param", value);
                item.textContent = `[${key}]`;
                output.innerHTML = li;
                i++;
                //console.log(i);
                if(key === "id") 
                {
                  
                }
                if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
                value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
                item.append(value);
                return item;
            });
            const list = ul.cloneNode();
            list.append(...html);
            return list;
        }).bind(null, document.createElement("UL"), document.createElement("li"));

function init()
{
  
  Index1 = -1;
  bool = true;
  //var timer = setTimeout(function ajaxQuery(){
 
  
      var ajaxhttp = new XMLHttpRequest();
      var url = "./data.json";
      
      ajaxhttp.open("GET",url,true);
      ajaxhttp.setRequestHeader("content-type","application/json");
      
      
      ajaxhttp.onreadystatechange = function(){
        if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200){
          
          jsontent = JSON.parse(ajaxhttp.responseText);
          
          posts = jsontent["response"];
          
          data["response"].forEach(function(item, i, arr) 
          {
            posts["items"].forEach(function(item2, i1, arr) 
            {
              
              
              
              if(item["id"]===item2["id"])
              {
                console.log(item["photo"]);
              }
            });
            
          });
          
          
          
          tree.innerHTML = "";
          const html = recursiveList(jsontent);
          tree.append(html);
          
          
           
           
           
           console.log("-------------------------------------------");
           console.log("posts=>"+posts["items"][0]["id"]);
           console.log("attachment=>"+posts["items"][0]["attachments"][0]["photo"]["id"]);
           
           console.log("posts=>"+data["response"][0]["id"]);
           console.log("attachment=>"+data["response"][0]["photo"][0]["big"]["id"]);
           console.log("-------------------------------------------");
          
           
           
           
           
           
        }
      }
      ajaxhttp.send();
      //setTimeout(ajaxQuery,1000);


var matches = document.querySelectorAll("li");
//NodeList
console.log(matches);

}
init();
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить Select с помощью JS Alex921 Общие вопросы Javascript 4 04.01.2016 15:55
Как распарсить данные с помощью React.js? Heisenberg Библиотеки/Тулкиты/Фреймворки 1 17.11.2015 15:43
Как передавать данные из цикла php в javascript dfinchenko Элементы интерфейса 2 26.09.2015 15:06
Почему ошибка при статусе 200, или как сформировать ответ? [NodeJS&AJAX] blacklool AJAX и COMET 2 10.03.2015 20:36
Как создать двумерный массив с помощью циклов. dima*** Ваши сайты и скрипты 30 16.12.2012 11:58