javascript object array iteration

Question

I have Json data like below;

  let data = [
  {
    "name": "John Doe",
    "position": "Accountant",
    "social": ["facebook", "instagram", "youtube", "pinterest"]
  },
  {
    "name": "Michael Schumaher",
    "position": "F1 Pilot",
    "social": ["facebook", "instagram", "youtube", "pinterest"]
  }
];

I need to loop iterate nodes and child arrays called social.

let html = '';
let i;

for ( i = 0; i < data.length; i++) {

   let socArr = data[i].social;

   socArr.forEach ( function ( item ) {
     console.log( item + '/');
   });
};

I need to display 'name position social' in the same div, but forEach loop gives me all array data in the json document.

Your code is iterating over the nodes and social array. What's the final output you want? — Mark
– Mark, Commented Sep 23, 2018 at 21:50
"but forEach loop gives me all array data" That is what forEach is supposed to do, iterate over each element of the array. If you only want a certain element of the array then access only that particular element, ie socArr[1] — Patrick Evans
– Patrick Evans, Commented Sep 23, 2018 at 21:50
I want to append all social names to a class for an icon. Also count of social arrays will be unclear it would be any number. — mkltkn
– mkltkn, Commented Sep 23, 2018 at 21:55

Jonathan Gagne · Accepted Answer · 2018-10-20 16:25:10Z

2

Related to your question, I would assume that you only need two div elements. So for that scenario, I would create two statics div into your html body then feeding them with that loop. See the example below:

let data = [
    {
        "name": "John Doe",
        "position": "Accountant",
        "social": ["facebook", "instagram", "youtube", "pinterest"]
    },
    {
        "name": "Michael Schumaher",
        "position": "F1 Pilot",
        "social": ["facebook", "instagram", "youtube", "pinterest"]
    }
];

for (let i = 0; i < data.length; i++) {
    document.getElementById('myDiv' + (i + 1)).innerHTML = data[i].name + '<br/>' + data[i].position + '<br/>';
    let socArr = data[i].social;
    socArr.forEach ( function ( item ) {
        document.getElementById('myDiv' + (i + 1)).innerHTML += item + '<br/>';
    });
    document.getElementById('myDiv' + (i + 1)).innerHTML += '<br/>';
}

<div id="myDiv1"></div>
<div id="myDiv2"></div>

edited Oct 20, 2018 at 16:25

answered Sep 23, 2018 at 21:52

Jonathan Gagne

4,4095 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Evans Over a year ago

The only difference between this and OP's is you are using forEach for both loops, either way you are going to be accessing the same things with either method.

vol7ron · Accepted Answer · 2018-09-24 00:12:52Z

I cannot replicate the behavior you state. You should be able to iterate over each record (element of the array) and then iterate over its values:

let data = getData();
let body = document.querySelector('body')
let fragment = document.createDocumentFragment()  // used for performance
let text = (str) => document.createTextNode(str)  // used to reduce/simplify code
let br = () => document.createElement('br')       // used to reduce/simplify code

data.forEach(rcd => {
  // create new div for each record
  let div = document.createElement('div')

  // iterate over record values
  for (let value of Object.values(rcd)) {
    div.appendChild(text(value))
    div.appendChild(br())
  }

  // add to fragment
  fragment.appendChild(div)
});

// add to DOM
body.appendChild(fragment);



// Data structure is placed in function so logic SO is seen first
function getData() {
  return [{
      "name": "John Doe",
      "position": "Accountant",
      "social": ["facebook", "instagram", "youtube", "pinterest"]
    },
    {
      "name": "Michael Schumaher",
      "position": "F1 Pilot",
      "social": ["facebook", "instagram", "youtube", "pinterest"]
    }
  ]
}

div {
  border: 1px solid;
  padding: .5rem;
  margin: 1em
}

Collectives™ on Stack Overflow

javascript object array iteration

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related