Question

我需要在易趣上市的javascript中显示相关产品。我有这个想法：我保留有关其他列表的数组信息，如：网址，图片，价格和附加到此产品的标签。

示例：

some_product = [
    tags: 'home, garden, kitchen',
    url: http://listing.url,
    price: 100
],
some_product_2 = [
    tags: 'home, lifestyle, books',
    url: http://listing2.url,
    price: 120
]

在列表中我把代码放在：

<script type="text/javascript" src="http://domain.com/related_prod.js?keyword=home"></script>

我希望在“标签”中显示所有带有“home”的产品。有人可以指导我找到解决方案吗？

Answer 1

首先，这不是有效的JavaScript或JSON：

some_product = [
  tags: 'home, garden, kitchen',
  url: http://listing.url,
  price: 100
],
  some_product_2 = [
  tags: 'home, lifestyle, books',
  url: http://listing2.url,
  price: 120
]

以上内容应替换为{ }对象。

{
    some_product: {
      tags: 'home, garden, kitchen',
      url: http://listing.url,
      price: 100
    },
      some_product_2: {
      tags: 'home, lifestyle, books',
      url: http://listing2.url,
      price: 120
    }
}

以上是JavaScript对象。但这已经变得更好了。现在，这是一个纯JSON，它必须添加到JavaScript变量中。考虑一下：

var products = {
    some_product: {
      tags: 'home, garden, kitchen',
      url: http://listing.url,
      price: 100
    },
      some_product_2: {
      tags: 'home, lifestyle, books',
      url: http://listing2.url,
      price: 120
    }
}

现在使用products，您可以循环并将其作为列表项。

var products = {
  some_product: {
    tags: 'home, garden, kitchen',
    url: 'http://listing.url',
    price: 100
  },
  some_product_2: {
    tags: 'home, lifestyle, books',
    url: 'http://listing2.url',
    price: 120
  }
}
var finalHtml = "";
for (var item in products) {
  finalHtml += '<li><a href="' + products[item].url + '">' + item + '<\/a> <br \/>Tags: ' + products[item].tags + '<br \/>Price: ' + products[item].price + ' $</li>';
}
document.getElementById("products").innerHTML = finalHtml;

<ul id="products"></ul>

请参阅上面的代码段。

Answer 2

考虑到这不是有效的JavaScript，我们可以将您的代码重构为更适合您的方案的内容......就像这样：

var products = [
  {
    name: 'some_product',
    tags: ['home', 'garden', 'kitchen'],
    url: 'http://example.com/1',
    price: 100,
  },

  {
    name: 'some_product_2',
    tags: ['home', 'lifestyle', 'books'],
    url: 'http://example.com/2',
    price: 120, 
  }
];

从这里开始，我们可以使用Array.prototype.filter根据tags获取结果：

function category(tag) {
  return products.filter(function(product){
    if (~product.tags.indexOf(tag)) return product;
  });
}

category('home');
// ...

Example

Answer 3

Praveen Kumar和Jamen都证明是有帮助的。我加入了他们的答案来创建一个代码。

＆＃13;

var products = [
  {
    name: 'some_product',
    tags: ['home', 'garden', 'kitchen'],
    url: 'http://example.com/1',
    price: 100,
  },

  {
    name: 'some_product_2',
    tags: ['home', 'lifestyle', 'books'],
    url: 'http://example.com/2',
    price: 120, 
  },

  {
    name: 'some_product_3',
    tags: ['garden', 'lifestyle', 'books'],
    url: 'http://example.com/2',
    price: 120, 
  }
];

var finalHtml = "";

function category(tag) {
  return products.filter(function(product){
    if (~product.tags.indexOf(tag)) {
    	finalHtml += '<li><a href="' + product.url + '">' + product.name + '<\/a><br \/>Price: ' + product.price + ' $</li>';
      document.getElementById("products").innerHTML = finalHtml;
    	console.log(product.name);
    }
  });
}
category('home');
//category('garden');

＆＃13;

<ul id="products"></ul>

＆＃13;

https://jsfiddle.net/p5x2v2cb/

感谢您的回答。

在javascript中显示相关产品

3 个答案: