时间戳

首页 > 解决方案 > 循环遍历对象数组并在 html 标签内显示道具的值 - Javascript

javascript - 循环遍历对象数组并在 html 标签内显示道具的值 - Javascript

问题描述

我是 JS 的新手，我正在尝试一个练习。我想遍历一个对象内的一组对象，并将索引值从一个对象映射到另一个对象内的 id 值，并基于此，我想执行一些操作。我的对象：

        obj= {
          "text": [{
          "id": 0,
          "name": "aaa"
          },{
          "id": 1,
          "name": "bbb"
          },{
           "id": 3,
          "name": "ccc"
          },{
          "id": 4,
          "name": "ddd"
          }],
  "content": [
      {
      "id": 123,
      "index": 0
      },{
       "id": 1232,
      "index": 2
      },{
       "id": 12333,
      "index": 3
      }
      ]
        }

本节有 2 个部分，1) 以表单形式呈现对象name内部的属性 值text：

aaa
bbb
ccc
ddd
eee
fff

2）我想-根据对象内部提供的索引在每组名称值之后添加一个。content基本上我想将索引值从内容对象映射到文本对象内部的 id 值，并根据它们，我想-在名称值之后添加。即：在上述情况下，索引为：0,2,3。因此 o/p 看起来像：

aaa
bbb
-
ccc
-
ddd

这是我到目前为止第 1 部分的代码：

function string () {
var arr = obj.text;
      var output = '';
    for(var i=0; i<arr.length; i++) {
        output += '<div>'+ arr[i].text + '</div>';  
    }
    document.getElementById("container").innerHTML =  output;
};

我在第 2 部分需要一些帮助。知道吗？

标签： javascript

解决方案

在我看来这是一个简单的问题，所以这是一个解决方案，我只是想知道我是否没有错过这个问题的微妙之处？

const
  obj = { text:   [ { id: 0, name: "aaa" } 
                  , { id: 1, name: "bbb" } 
                  , { id: 3, name: "ccc" } 
                  , { id: 4, name: "ddd" } 
                  ] 
        , content:[ { id: 123,   index: 0 } 
                  , { id: 1232,  index: 2 } 
                  , { id: 12333, index: 3 } 
                  ] 
        } 

function string()
  {
  let a_text    = obj.text
    , a_content = obj.content
    , Container = document.getElementById("container")
    , c_Index   = 0

  if ( a_content[c_Index].index === 0 ) c_Index++
  
  for(let i=0; i<a_text.length; i++)
    {
    if (i >= a_content[c_Index].index)
      {
      c_Index++
      let barDiv = document.createElement('div')
      barDiv.textContent = '-'
      Container.appendChild(barDiv)
      }

    let NewDiv = document.createElement('div')
    NewDiv.textContent = a_text[i].name
    Container.appendChild(NewDiv)
    }
  }

string()
<div id="container"></div>

推荐阅读