Question

所以，这是POJO：

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

我想做的是使用if语句执行类似的操作：

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

这样最终结果应该是：

（HTML）

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

如果您不明白我的问题，请告诉我，我会尽力解释。

对于行之有效的答案，我在评论中的某处说了“此行之有效”或“行之有效”，以便查看此问题的人们可以轻松找到自己的答案。

Answer 1

如果要提取所有唯一的URL，可以使用Object.values将对象转换为数组。使用Set和flatMap获取唯一值。

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>

如果要检查对象上是否包含某个URL，可以使用Object.values将对象转换为数组。 Uee some检查元素0的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);

Answer 2

使用Object.values，filter和map获取URL，然后使用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>`);

Answer 3

您可以使用Set获取唯一的网址，并将其附加到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>

Answer 4

尝试此代码：

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

Answer 5

您可以使用array.some

如果嵌套数组只有一个对象

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)

如果嵌套数组可以包含多个元素，并且任何人都可以拥有键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)

Answer 6

聚会晚了一点，但这是我的方法。

给出：

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

由于我们使用的是flatMap运算符，因此以下代码是安全的：

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

然后：

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

更多读数：

https://gists.cwidanage.com/2018/06/how-to-iterate-over-object-entries-in.html

Remove duplicate values from JS array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

如何检查至少有一个具有特定网址的嵌套对象

6 个答案: