loop trough elements in API JSON file

Question

i'm trying to print all "name" values in HTML from my API JSON file, i'm pretty new to javascript and jquery, how could i do this? Here's my JSON file, all the {}, have the same structure but with different information.

{
"launches": [
{
"id": 2036,
"name": "Electron | Don't Stop Me Now",
"windowstart": "June 11, 2020 04:43:00 UTC",
"windowend": "June 11, 2020 06:32:00 UTC",
},
{},
{},
{},
{},
{},
{},
{},
{},

Does this answer your question? [For-each over an array in JavaScript](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — A. L, Jun 07 '20 at 06:12

score 1 · Accepted Answer · answered Jun 07 '20 at 06:40

You can try a simple for loop or forEach loop...

  // json data

  let data = {
    "launches": [
        {
            "id": 2036,
            "name": "Electron | Don't Stop Me Now",
            "windowstart": "June 11, 2020 04:43:00 UTC",
            "windowend": "June 11, 2020 06:32:00 UTC",
        },
        {
            "id": 2037,
            "name": "Don't Stop Me Now",
            "windowstart": "June 11, 2020 04:43:00 UTC",
            "windowend": "June 11, 2020 06:32:00 UTC",
        }
    ]
};

// function for handling data manipulation 
function printNames() {
    let parsed = '';// temp variable for storing it as string
    for (i = 0; i < data.launches.length; i++) { //iterate through each array item to fin require info
        parsed += data.launches[i].id + ' ' + data.launches[i].name + "\n";
    }
    console.log(parsed)
    let elem = document.getElementById('container');
    elem.innerHTML = parsed; //Append it to container
}
printNames();

Hey! thanks, but i can't manage to make a new line after every iteration of the for loop — Aguss Masco, Jun 07 '20 at 21:10
@AgussMasco or you could change the elem.innerHTML to innerText and it will work fine... If u found the answer useful please upvote it :) — Nithin P.H, Jun 08 '20 at 09:09

score 0 · Answer 2 · answered Jun 07 '20 at 06:21

0

This is how you can loop through an array of objects and print a specific value of object

jsonObj.launches.forEach(item => console.log(item.name))

answered Jun 07 '20 at 06:21

thealpha93

780
4
15

How could i instead of console.log, show the names in a html doc? – Aguss Masco Jun 07 '20 at 07:11

score 0 · Answer 3 · answered Jun 07 '20 at 06:22

If you're using plain Javascript. You could do something like this.

var data = [{
    "launches": [
    {
    "id": 2036,
    "name": "Electron | Don't Stop Me Now",
    "windowstart": "June 11, 2020 04:43:00 UTC",
    "windowend": "June 11, 2020 06:32:00 UTC",
    }]
   }];

    var names = data.map(i=>i.name);

    names.forEach(i=>{
     var div = document.createElement('div');
     div.innerText = i;
     document.body.appendChild(div);
    })

Ankit Acharya · Answer 4 · 2021-09-08T05:25:38.500

0

you can do

launches.map((item,index)=>{
return <h3 key={index}>{item.name}</h3>
})

it will loop through all the values of your array and print your desired value.

edited Sep 08 '21 at 05:25

answered Jun 07 '20 at 06:23

Ankit Acharya

36
4

score 0 · Answer 5 · answered Jun 07 '20 at 06:25

var my_object = {
    "launches": [
    {
    "id": 2036,
    "name": "Electron | Don't Stop Me Now",
    "windowstart": "June 11, 2020 04:43:00 UTC",
    "windowend": "June 11, 2020 06:32:00 UTC",
    }]};

for(var i=0; i<my_object.launches.length;i++){
    console.log(my_object.launches[i].name);
}

score 0 · Answer 6 · answered Jun 07 '20 at 06:41

Here's a simple way to do what you're suggesting.
(I wasn't sure what you meant by "print ... in HTML", so I just added each name string to an existing list in the HTML code.)

// An array that might be a JSON response from an HTTP request
const players = [
  { name: "Chris", score: 20, winner: false },
  { name: "Anne", score: 22, winner: true },
  { name: "Taylor", score: 14, winner: false }
];

// You can loop through an array with `for...of`
for(let player of players){

  // You can access a property of "player" with `player.whateverThePropIsCalled`
  addListItem(player.name);
}

// You can do whatever you want with the name, such as appending it to a list
function addListItem(name){
  const textNode = document.createTextNode(name);
  const listItem = document.createElement("LI");
  listItem.appendChild(textNode);

  const list = document.getElementById("list");
  list.appendChild(listItem);
}

<ol id="list"></ol>

loop trough elements in API JSON file

6 Answers6