Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

Question

Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

I am a beginner in JavaScript and I am currently working on an exercise. My goal is to iterate through an array of objects within another object, map the index values from one object to the id values in another object, and based on that, perform a certain operation. Below is my object:

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
      }
    ]
}

This section has two parts:
1) To display the values of the name property within the text object as follows:

aaa
bbb
ccc
ddd
eee
fff

2) I aim to insert a - after every group of name values based on the index provided within the content object. Essentially, I need to match the index values from the content object to the id values inside the text object and add a - accordingly. In this case, with indexes of 0, 2, and 3, the output should appear like:

aaa
bbb
-
ccc
-
ddd

Here is the code I have for part 1 so far:

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;
}

I would appreciate any help regarding part 2. Do you have any suggestions?

javascript

Answer 1

Answer №1

It appears to be a straightforward issue to me, so here's a proposed solution. However, I can't help but wonder if there's a subtle detail in the question that I might have overlooked.

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>

Answer 2

It appears to be a straightforward issue to me, so here's a proposed solution. However, I can't help but wonder if there's a subtle detail in the question that I might have overlooked.

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>

Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

Answer №1

Similar questions

Wait for all asynchronous functions in Node.js to finish before proceeding with the remaining code

What is the best way to indicate the selected item in the Menu List using Material UI React?

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

Using jQuery to trigger several setTimeout() functions in succession

"Troubleshooting: Jquery Draggable Function Fails to Execute

Using JQuery to find the nearest element and narrowing down the search to its child elements

What is the best way to choose the element directly beneath a specific element using jQuery?

The Discord.js guildMemberUpdate event: Everything you need to know

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

The ng-change functionality of Angular radio buttons only functions correctly the first time it

The JSONP file can be successfully retrieved through an AJAX request in the console, however, the data does not display when attempting

Synchronizing code paths that involve both ajax and non-ajax functions can be achieved by

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

How can NodeJS implement ThreadLocal variable functionality without relying on req and res.locals?

Problem with Material-UI Drawer

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

CORS blocked the JavaScript Image's request

JSF CommandLink malfunctions on Firefox when reRendering an entire form

Tips for integrating jwt token into axios request

Deploying CSS/JS files in Magento 2 is a crucial