How do I check if there is at least one nested object that has a specific url

Question

So, here is the POJO:

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }]
}

What I would like to do is to have an if statement doing something like:

if (there is at least one nested object with a "url") { 
  $('body').append("<div>" + url +"</div>");
}

So that the end result should be:

(HTML)

<body>
  <div>stackoverflow.com</div>
  <div>example.com</div>
</body>

If you don't understand my question, please tell me and I'll try an explain it better.

For answers that worked, I said "this works" or "it worked" somewhere in the comments so people viewing this question can find it easy to find their answer.

So you are searching for a SPECIFIC url ? or just an url ? And if there is an object with an url or a specific url you want to print the object ? the parent object ? or just the url ? — Mihai T, Apr 19 '19 at 07:47
@MihaiT | I'm searching for all the urls but only to use only one, I think? The HTML section should explain it — Tigerrrrr, Apr 19 '19 at 07:54
You think ? :)) You are not sure what you want ? `searching for all the urls but only to use only one` `The HTML section should explain it` . You say one but in the HTML you have 2 . So, which is it ? :) Let's say you want to use only one URL inside the HTML, which one should that be ? what condition ? — Mihai T, Apr 19 '19 at 08:02
@MihaiT | I understand what I want, I'm just not sure how to explain it. There's three different urls, 1. stackoverflow.com 2. example.com 3. example.com. I'd like the end result to use only the unique url and put them into a div. So that the end result is: `
stackoverflow.com
example.com
` — Tigerrrrr, Apr 19 '19 at 08:06
So, basically what you want is a list of unique URLs, isn't? — WSD, Apr 19 '19 at 08:09

Eddie · Accepted Answer · 2019-04-19T08:09:46.630

If you want to extract all unique URLs, you can use Object.values to convert the object into an array. Use Set and flatMap to get the unique values.

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }, {
    "url": "example2.com",
  }]
}

var result = [...new Set(Object.values(foodwebsites).flatMap(o => o.map(v => v.url))).values()]


//Loop thru the result array and append it to body
result.forEach(function(o) {
  $("body").append("<div>" + o + "</div>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you want to check if a certain URL is included on the object, you can use Object.values to convert the object into an array. Uee some to check the element 0's URL.

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{                    //2 URLS for cheese
    "url": "example.com",
  }, {
    "url": "example2.com",
  }]
}

var result = Object.values(foodwebsites).some(o => o.some(v => v.url === "example2.com"))

console.log(result);

Okay, but how would I insert that url into a div? – Tigerrrrr Apr 19 '19 at 08:03 — Tigerrrrr, Apr 19 '19 at 08:03
You can loop thru the array. I added a sample. @Tigerrrrr – Eddie Apr 19 '19 at 08:09 — Eddie, Apr 19 '19 at 08:09

Jack Bashford · Answer 2 · 2019-04-19T08:03:23.020

2

Use Object.values, filter and map to get the URLs, then place them on the page with forEach:

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }]
};

var urls = [...new Set(Object.values(foodwebsites).filter(item => item.some(({ url }) => url)).map(item => item.map(({ url }) => url)).reduce((acc, curr) => acc.concat(curr)))];

urls.forEach(url => document.body.innerHTML += `<div>${url}</div>`);

edited Apr 19 '19 at 08:03

answered Apr 19 '19 at 07:52

Jack Bashford

43,180
11
50
79

Oh no, if you look at the HTML Section in my question, you'll see that the end result would be only: stackoverflow.com and example.com. I'm not looking for all the urls just one of each url – Tigerrrrr Apr 19 '19 at 07:57
@Tigerrrrr I have edited my answer, now it works to your standard. – Jack Bashford Apr 19 '19 at 08:03

score 2 · Answer 3 · answered Apr 19 '19 at 07:56

You could use a Set to get unique urls and append them to body

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }]
}

const urls =  Object.values(foodwebsites)
                    .flat()
                    .reduce((set, a) => a.url ? set.add(a.url) : set, new Set)

for (let url of urls) { 
  $('body').append("<div>" + url +"</div>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body> </body>

Awesome, thanks, this worked too! (Neat and Simple) – Tigerrrrr Apr 19 '19 at 08:18 — Tigerrrrr, Apr 19 '19 at 08:18

score 1 · Answer 4 · answered Apr 19 '19 at 07:51

1

Try this code :

let urls = Object.values(foodwebsites).reduce((prev, item) => prev += item[0].url ? `<div>${item[0].url}<div>` : "", "");
    if(urls !== "")$('body').append("<div>" + urls +"</div>");

answered Apr 19 '19 at 07:51

RK_15

929
5
11

@Tigerrrrr To whom u r commenting on codepen that is not My code – RK_15 Apr 19 '19 at 08:05
Sorry, I changed somethings. All I added was the POJO – Tigerrrrr Apr 19 '19 at 08:08
Oh, sorry, I'm such an idiot... I forgot to link to jquery – Tigerrrrr Apr 19 '19 at 08:11
This is almost exactly how I want it but how would I make it so that the end result would be: stackoverflow.com and example.com so that when there are multiple nested objects with the same url only one will be found. – Tigerrrrr Apr 19 '19 at 08:13

Ashish · Answer 5 · 2019-04-19T07:57:43.177

You can use array.some

If the nested array will have only one object

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }]
}

const ifUrl = Object.values(foodwebsites).some(values => values[0] && values[0].url === 'example.com')

console.log(ifUrl)

If the nested array can have multiple numbers of elements and anyone can have the key URL

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }]
}

const ifUrl = Object.values(foodwebsites).some(values => values.some(v => v.url === 'example.com'))

console.log(ifUrl)

Okay, but how would I insert that url into a div? The end result should be `
stackoverflow.com
example.com
` — Tigerrrrr, Apr 19 '19 at 08:22

WSD · Answer 6 · 2019-04-19T08:46:38.927

A little bit late to the party, but here's my approach.

Given:

var foodwebsites = {
  "bacon": [{
    "url": "stackoverflow.com",
  }],
  "icecream": [{
    "url": "example.com",
  }],
  "cheese": [{
    "url": "example.com",
  }]
}

const result = Object.values(foodwebsites)
      .flatMap((item)=>{return item})
      .map((item)=>{return item.url})
      .reduce((collection,item)=>{if (collection.indexOf(item) < 0) collection.push(item); return collection}, []);

// Outputs: ["stackoverflow.com", "example.com"]

And since we are using flatMap operator the same code will be safe for the following:

 var foodwebsites = {
  "bacon": [
  {"url": "stackoverflow.com"},
  {"url":"another.com"}],

  "icecream": [
  {"url": "example.com"}],

  "cheese": [
  {"url": "example.com"},
  {"url": "stackoverflow.com"}]
}

//Output: ["stackoverflow.com", "another.com", "example.com"]

Then:

result.forEach((url)=>{$('body').append("<div>" + url +"</div>");})

How do I check if there is at least one nested object that has a specific url

6 Answers6