Kevin Powell - Community•2y ago

How do I access JSON arrays within array?

fetch("./data.json")
.then(function (response) {
 return response.json();
 })
 .then(function (jobs) {
 let out = "";
for (let job of jobs) {
// let languagesItems = job.languages;
// console.log(languagesItems);
// for(let i=0;i<languagesItems.length;i++){
//     console.log(languagesItems[i]);
// }
out += `
<div class="job-card">
<div class="job-info">
<img src="${job.logo}" alt="${job.company} Logo" class="logo-img">
<div class="desktop-flex-div">
<div class="cname-new-featured">
<p class="company-name">${job.company}</p>
<p class="new ${job.new}">NEW!</p>
<p class="featured ${job.featured}">FEATURED</p>
</div>
<h1 class="job-title">${job.position}</h1>
<div class="job-details">
<ul class="details-list">
<li>${job.postedAt}</li>
<li>${job.contract}</li>
<li>${job.location}</li>
</ul>
</div>
</div>
</div>
<div class="filters">
<p class="filter">${job.role}</p>
<p class="filter">${job.level}</p>
<p class="filter">${job.languages}</p>
<p class="filter">${job.tools}</p>
</div>
</div>
`;
}
jobCards.innerHTML = out;
 mainScript();
});

fetch("./data.json")
.then(function (response) {
 return response.json();
 })
 .then(function (jobs) {
 let out = "";
for (let job of jobs) {
// let languagesItems = job.languages;
// console.log(languagesItems);
// for(let i=0;i<languagesItems.length;i++){
//     console.log(languagesItems[i]);
// }
out += `
<div class="job-card">
<div class="job-info">
<img src="${job.logo}" alt="${job.company} Logo" class="logo-img">
<div class="desktop-flex-div">
<div class="cname-new-featured">
<p class="company-name">${job.company}</p>
<p class="new ${job.new}">NEW!</p>
<p class="featured ${job.featured}">FEATURED</p>
</div>
<h1 class="job-title">${job.position}</h1>
<div class="job-details">
<ul class="details-list">
<li>${job.postedAt}</li>
<li>${job.contract}</li>
<li>${job.location}</li>
</ul>
</div>
</div>
</div>
<div class="filters">
<p class="filter">${job.role}</p>
<p class="filter">${job.level}</p>
<p class="filter">${job.languages}</p>
<p class="filter">${job.tools}</p>
</div>
</div>
`;
}
jobCards.innerHTML = out;
 mainScript();
});

1 JSON array: { "id": 1, "company": "Photosnap", "logo": "./images/photosnap.svg", "new": true, "featured": true, "position": "Senior Frontend Developer", "role": "Frontend", "level": "Senior", "postedAt": "1d ago", "contract": "Full Time", "location": "USA Only", "languages": ["HTML", "CSS", "JavaScript"], "tools": [] }, How do I access "languages" and made them elements get dynamically created, as well as not created if empty?

35 Replies

b1mind•2y ago

Tech it would be an object or array of objects* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse you also have JSON.stringify() for the reverse.

DovahOP•2y ago

I did this and it kinda worked I think, am super tired so my brain is out of juice

let languagesItems = job.languages;
        console.log(languagesItems);
        let languagesItem = "";
        for(let i=0;i<languagesItems.length;i++){
            languagesItem += `<p class="filter">${languagesItems[i]}</p>`;
        }

let languagesItems = job.languages;
        console.log(languagesItems);
        let languagesItem = "";
        for(let i=0;i<languagesItems.length;i++){
            languagesItem += `<p class="filter">${languagesItems[i]}</p>`;
        }

b1mind•2y ago

na use the API

fetch("./data.json")
.then(function (response) { 
 const jsonData = response.json();
 return JSON.parse(jsonData)
 })

fetch("./data.json")
.then(function (response) { 
 const jsonData = response.json();
 return JSON.parse(jsonData)
 })

or something

DovahOP•2y ago

hmmmm okay, will check it out tomorrow. Thanks for the info

b1mind•2y ago

then you have a object or array of objects to work with

DovahOP•2y ago

No chance of you implementing it into the code ? I know I may ask tooo much xD

b1mind•2y ago

i just did xD

DovahOP•2y ago

wait How would I implement that inot the paragraphs? As code?

`${JSON.parse}`

`${JSON.parse}`

or something IT broke my code

b1mind•2y ago

then remove it didn't need parsed are you just trying to loop through jobs.languages? maybe I misunderstood your issue

DovahOP•2y ago

Yeah yeah and add them dynamically into the paragraphs in one go where they are needed as well if its empty to not add them

out += `
<div class="job-card">
<div class="job-info">
<img src="${job.logo}" alt="${job.company} Logo" class="logo-img">
<div class="desktop-flex-div">
<div class="cname-new-featured">
<p class="company-name">${job.company}</p>
<p class="new ${job.new}">NEW!</p>
<p class="featured ${job.featured}">FEATURED</p>
</div>
<h1 class="job-title">${job.position}</h1>
<div class="job-details">
<ul class="details-list">
<li>${job.postedAt}</li>
<li>${job.contract}</li>
<li>${job.location}</li>
</ul>
</div>
</div>
</div>
<div class="filters">
<p class="filter">${job.role}</p>
<p class="filter">${job.level}</p>
<p class="filter">${job.languages}</p>
<p class="filter">${job.tools}</p>
</div>
</div>
`;

out += `
<div class="job-card">
<div class="job-info">
<img src="${job.logo}" alt="${job.company} Logo" class="logo-img">
<div class="desktop-flex-div">
<div class="cname-new-featured">
<p class="company-name">${job.company}</p>
<p class="new ${job.new}">NEW!</p>
<p class="featured ${job.featured}">FEATURED</p>
</div>
<h1 class="job-title">${job.position}</h1>
<div class="job-details">
<ul class="details-list">
<li>${job.postedAt}</li>
<li>${job.contract}</li>
<li>${job.location}</li>
</ul>
</div>
</div>
</div>
<div class="filters">
<p class="filter">${job.role}</p>
<p class="filter">${job.level}</p>
<p class="filter">${job.languages}</p>
<p class="filter">${job.tools}</p>
</div>
</div>
`;

This part

b1mind•2y ago

that code you wrote above didn't work? then just use that var? o wait hah

DovahOP•2y ago

${job.languages} These need to be separate paragraphs and if empty to not show up But it's confusing me a lot right now need to be loopy

b1mind•2y ago

let languageItems = "";
if (job.languages > 0) {
  job.languages.forEach(lang => {
    console.log(lang);
    languagesItem += `<p class="filter">${lang}</p>`;
  }
}

let languageItems = "";
if (job.languages > 0) {
  job.languages.forEach(lang => {
    console.log(lang);
    languagesItem += `<p class="filter">${lang}</p>`;
  }
}

something like that?

DovahOP•2y ago

lemmie try it

b1mind•2y ago

then you would use ${languageItems} in the full template

DovahOP•2y ago

did it but something it is not going into the loop fore some reason 🤔

b1mind•2y ago

put it in a codepen for me?

DovahOP•2y ago

sec

DovahOP•2y ago

https://codepen.io/DovahTheKiin/pen/ZEjePXr

DovahTheKiin

CodePen

ZEjePXr

...

DovahOP•2y ago

But we have no JSON xD

b1mind•2y ago

sorry I had a bad check too, I'm also tired hah no sleep last night (forgot .length 😂 ) but you need more data or you would not make it past the first for of

b1mind•2y ago

https://codepen.io/b1mind/pen/XWBMGzB?editors=0010

Brent Morton

CodePen

XWBMGzB

...

b1mind•2y ago

You you will want to put a check before your for (let job of jobs) too there I edited to use a for of for both just cause it might help you understand better and now looks the same >.>;;

DovahOP•2y ago

Was grabbing a snack myself let me look xD

b1mind•2y ago

make sure to copy the code over cause I will nuke that pen sooner than later This should make sense since basically we are just duplicating what you already did with jobs just within the jobs loop

DovahOP•2y ago

Is my internet back? I think xD So same problem as my code where some are still in 1 paragraph reverse order and so on It has to do with the number of iterations going inside of loops but I'm toooo out of energy to wrap my head around it.

b1mind•2y ago

yea get some sleep cause at this point not sure what you are after if you wanted them in the same p just toString() it hehe

DovahOP•2y ago

DovahOP•2y ago

this is how it looks

DovahOP•2y ago

DovahOP•2y ago

This is how it needs to look So each array item needs to be a separate paragraph and dynamically generated But it is harder than it looks, or there is some easy way that we don't know of

b1mind•2y ago

Show me the full but go get some sleep, cause at this point I think your issue is CSS hah and I'm kinda lost still lol cause that is just flex items that you could make from your array not paragraphs

DovahOP•2y ago

I call them paragraphs since I'm putting items into <p> tag xD Pretty sure CSS is working it is just that our logic is not Either way lets see if someone else jumps in if not will figure it out somehow xD I hope I had it hardcoded when I was designing and it was working it i just the JSON insertation that is not @b1mind I figured it out. Both your and mine solutions work, but yours is much more neater and better I was overlooking second array in Json file that I thought was "languages" one xD that was confusing me order is still a bit off, but hey it mostly works thanks for all the help!

b1mind•2y ago

nice glad you got it working! np

DovahOP•2y ago

Sorry for bothering you when I should have took a break and came back to it fresh instead. xD Thanks again! Now I can sleep without a bother xD

Gaming

Programming

How do I access JSON arrays within array?