根据一个属性过滤JavaScript对象

Question

My json file is like this. 我的json文件是这样的。

[
  {
    "ArtistID": 1,
    "FollowerID": 1,
    "Name": "JAYAH-Paradiso",
    "Location": "UK",
    "Latitude": "51.5",
    "Longitude": "0.1167",
    "Date": "22/03/2014"
  },
  {
    "ArtistID": 1,
    "FollowerID": 2,
    "Name": "Yasmin Dan",
    "Location": "London",
    "Latitude": "51.5072",
    "Longitude": "0.1275",
    "Date": "22/03/2014"
  },
  {
    "ArtistID": 2,
    "FollowerID": 1,
    "Name": "Daniel Sutka",
    "Location": "London",
    "Latitude": "51.5072",
    "Longitude": "0.1275",
    "Date": "22/03/2014"
  },
  {
    "ArtistID": 2,
    "FollowerID": 2,
    "Name": "Colton Brown",
    "Location": "Moore Haven, Florida",
    "Latitude": "26.8333",
    "Longitude": "81.1",
    "Date": "22/03/2014"
  }
]

I want to display the Followers of Artist 1 and Artist 2 in a map. 我想在地图上显示艺术家1和艺术家2的关注者。 And i want to display those data separately like Location of Followers of Artist 1 in RED circles and Location of Followers of Artist 2 in Blue circles. 我想分别显示那些数据，例如红色圆圈中的艺术家1的追随者位置和蓝色圆圈中的艺术家2的追随者位置。

And there are 2 buttons for Artist 1 and Artist 2. When i click on Artist 1 button it should display only red color circles. 并且有1个针对Artist 1和Artist 2的按钮。当我单击Artist 1按钮时，它应该仅显示红色圆圈。

Can somebody tell me a way to group these data using the ArtistID so that i can use it in those button clicks? 有人可以告诉我一种使用ArtistID对这些数据进行分组的方法，以便我可以在这些按钮单击中使用它吗？

OR 要么

I have those sets of circles on a map like 10 red circles(Artist1), 10 blue circles(Artist2), 10 green circles(Artist3). 我在地图上有这些圆圈组，例如10个红色圆圈（Artist1），10个蓝色圆圈（Artist2），10个绿色圆圈（Artist3）。 How can i select only red circles using d3 selectAll or select? 如何使用d3 selectAll仅选择红色圆圈或选择？

Or is there any other methods than that? 还是还有其他方法？

the color has been given like this(as the value of "fill" in "style" attribute, 颜色是这样指定的（作为“样式”属性中“填充”的值，

feature = g.selectAll("circle")
                    .data(data)
                    .enter().append("circle")
                    .attr("id", function (d) { return d.ArtistID + d.FollowerID; })
                    .style("stroke", "black")
                    .style("opacity", .6)
                    .style("fill", function (d) {
                        if (d.ArtistID == 1) { return "red" }
                        else if (d.ArtistID == 2) { return "blue" }
                        else { return "green" }
                        ;
                    })
                    .attr("r", 10);

so, the circles will be drawn like this, 因此，圆圈将像这样绘制

<circle id="10" r="10" transform="translate(695,236)" style="stroke: rgb(0, 0, 0); opacity: 0.6; fill: rgb(255, 255, 0);"></circle>

I want to select the circles of red color. 我想选择红色的圆圈。

Either filtering data of the json file, or selecting only circles of one color would help. 过滤json文件的数据，或仅选择一种颜色的圆圈都将有所帮助。

Thanks in Advance. 提前致谢。

Answer 1

You can use the following code to filter the data and get the Array of the followers of the Artist 2: 您可以使用以下代码过滤数据并获取Artist 2的关注者数组：

<html>
 <head>     
 <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
 <script>
$(function() {
        var json =  '[{"ArtistID":1,"FollowerID":1,"Name":"JAYAH-Paradiso","Location":"UK","Latitude":"51.5","Longitude":"0.1167","Date":"22/03/2014"},{"ArtistID":1,"FollowerID":2,"Name":"Yasmin Dan","Location":"London","Latitude":"51.5072","Longitude":"0.1275","Date":"22/03/2014"},{"ArtistID":1,"FollowerID":3,"Name":"Aaron Senior","Location":"London,UK","Latitude":"51.5072","Longitude":"0.1275","Date":"22/03/2014"},{"ArtistID":2,"FollowerID":1,"Name":"Daniel Sutka","Location":"London","Latitude":"51.5072","Longitude":"0.1275","Date":"22/03/2014"},{"ArtistID":2,"FollowerID":2,"Name":"Colton Brown","Location":"Moore Haven, Florida","Latitude":"26.8333","Longitude":"81.1","Date":"22/03/2014"},{"ArtistID":2,"FollowerID":3,"Name":"Thia Kirby","Location":"England","Latitude":"51.5","Longitude":"0.1167","Date":"22/03/2014"}]';

        var obj = jQuery.parseJSON(json);

        console.log(obj);

        var newArray = obj.filter( function (el) { return el.ArtistID == 2 } );

        console.log(newArray);
});
 </script>
 </head>
 <body>

 </body>
</html>

Answer 2

try to get required field using this: 尝试使用此字段来获取必填字段：

<script>
var json = [
 {
   "ArtistID": 1,
   "FollowerID": 1,
   "Name": "JAYAH-Paradiso",
   "Location": "UK",
   "Latitude": "51.5",
   "Longitude": "0.1167",
   "Date": "22/03/2014"
 },
 {
   "ArtistID": 1,
   "FollowerID": 2,
   "Name": "Yasmin Dan",
   "Location": "London",
   "Latitude": "51.5072",
   "Longitude": "0.1275",
   "Date": "22/03/2014"
 },
 {
   "ArtistID": 2,
   "FollowerID": 1,
   "Name": "Daniel Sutka",
   "Location": "London",
   "Latitude": "51.5072",
   "Longitude": "0.1275",
   "Date": "22/03/2014"
 },
 {
   "ArtistID": 2,
   "FollowerID": 2,
   "Name": "Colton Brown",
   "Location": "Moore Haven, Florida",
   "Latitude": "26.8333",
   "Longitude": "81.1",
   "Date": "22/03/2014"
 }
];
var data = eval(json);
for(x in data){
    alert(data[x].ArtistID);
if(){//check condition on ArtistID and use the data
}
}
</script>

Answer 3

You may want to consider using underscore for this. 您可能需要考虑使用下划线。 (Especially if you are doing more operations like this.) The where function describes what you are looking for. （特别是如果您要执行更多此类操作。）where函数描述您要查找的内容。

_.where(array, {ArtistID: X});

http://underscorejs.org http://underscorejs.org

edit: the groupBy method may also be of use to you in this situation. 编辑：在这种情况下，groupBy方法也可能对您有用。

根据一个属性过滤JavaScript对象

问题描述

3 个解决方案

解决方案1
1

解决方案2
1 2014-09-04 18:55:24

解决方案3
0 2014-09-04 18:35:03

根据一个属性过滤JavaScript对象

问题描述

3 个解决方案

解决方案1 1

解决方案2 1 2014-09-04 18:55:24

解决方案3 0 2014-09-04 18:35:03

解决方案1
1

解决方案2
1 2014-09-04 18:55:24

解决方案3
0 2014-09-04 18:35:03