L oop через массив массивов, которые содержат объекты и получают все указанные c значения от объектов, а затем показывают на странице JQuery - PullRequest
Новая
       0

L oop через массив массивов, которые содержат объекты и получают все указанные c значения от объектов, а затем показывают на странице JQuery

1 голос
/ 20 апреля 2020

Для каждого из приведенных ниже массивов в массиве, называемом data, будет li (в настоящее время есть 3 li, поэтому есть 3 массива)
Мне нужно l oop через указанные ниже массивы и от каждого объекта получить все значения «namespace» и «currentvalue».

Затем показать первый набор «namespace и currentvalue values» из всех объектов в первом массиве в виде текста в первом li, а затем выполнить то же самое для третьего и так далее и т. д. c ... Я прокомментировал пример того, как это должно выглядеть в HTML.

Спасибо за помощь!

Вот что у меня так далеко: 

let data = [
        [{_id: "5e9d", namespace: "Effect",  currentvalue: "comet",}, { _id: "1169", namespace: "HazCode",  currentvalue: "50",} , { _id: "1269", namespace: "Duration",  currentvalue: "10s",}],

        [{_id: "6e9d", namespace: "Effect",  currentvalue: "comet/flair",}, { _id: "1119", namespace: "HazCode",  currentvalue: "50",}],

        [{_id: "7e9d", namespace: "Effect",  currentvalue: "flair",},{ _id: "1178", namespace: "HazCode", currentvalue: "29",},]
    ]

    var els = $('.hideMe > li')

    // loop through array
    for(var i = 0; i < data.length; i++){
        $.each(data[i], function(index, d){
            els.text(d.namespace + ":" + d.currentvalue + ", ")
        })
    }
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
   <ul class="hideMe">
     <!-- First Should be <li> Effect: comet, HazCode: 50, Duration: 10s</li>  -->
     <li>lorem</li>
     <!-- Second Should be <li> Effect: comet, HazCode: 29</li>  -->
     <!--   etc...    -->
     <li>lorem</li>
     <li>lorem</li>
  </ul> 
</body>
</html>

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Вы можете достичь своей цели таким образом 

var els = $('.hideMe > li');
  // loop through array
  for(var i = 0; i < data.length; i++){
    let result = '';
    $.each(data[i], function(index, d){
      result += d.namespace + ":" + d.currentvalue + ", ";
    });
    els.eq(i).text(result);
  }
1 голос
/ 20 апреля 2020

Чтобы достичь того, что вам нужно, вы можете использовать forEach l oop для перебора каждого массива в data. Затем вы можете использовать map() для построения отформатированной строки, содержащей все свойства namespace и currentvalue, которые вы можете добавить к соответствующему li, используя text(). Попробуйте это: 

var $els = $('.hideMe > li')
data.forEach((arr, i) => $els.eq(i).text(arr.map(o => `${o.namespace}: ${o.currentvalue}`).join(', ')));


let data = [
  [
    { _id: "5e9d", namespace: "Effect", currentvalue: "comet" }, 
    { _id: "1169", namespace: "HazCode", currentvalue: "50" }, 
    { _id: "1269", namespace: "Duration", currentvalue: "10s" }
  ],
  [
    { _id: "6e9d", namespace: "Effect", currentvalue: "comet/flair" }, 
    { _id: "1119", namespace: "HazCode", currentvalue: "50" }
  ],
  [ 
    { _id: "7e9d", namespace: "Effect", currentvalue: "flair" }, 
    { _id: "1178", namespace: "HazCode", currentvalue: "29" }
  ]
]

var $els = $('.hideMe > li')
data.forEach((arr, i) => $els.eq(i).text(arr.map(o => `${o.namespace}: ${o.currentvalue}`).join(', ')));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hideMe">
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
</ul>

В сторону, будьте осторожны, оставляя запятые в ваших объектах и ​​массивах. Большинство современных браузеров могут справиться с этим, но некоторые устаревшие браузеры выдают ошибки из-за этого. Я удалил их все из примера выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...