将id添加到对象数组 - Javascript

时间:2018-04-25 13:10:33

标签: javascript arrays object

我有一个对象数组。如何从1开始为它们添加id键。

@Injectable()
export class BreadcrumService {
 invokeEvent: Subject<any> = new Subject();
 invokeEvent$ = this.invokeEvent.asObservable();
}

//component
export class Component implements OnChanges{
 constructor(private breadcrumService: BreadcrumService){
 this.breadcrumService.invokeEvent$.subscribe((data) => {
      // called multiple times
    });
}
}

所以,它会像

[
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
]

我尝试使用forEach但它返回id作为数组内所有对象的长度 - 1值。

我有很多对象,也可以使用lodash。

请建议并感谢您的帮助。

9 个答案:

答案 0 :(得分:3)

您可以使用Array#forEach。回调的第二个参数是指元素的索引。因此,您可以将ID指定为index + 1

&#13;
&#13;
const source = [{
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
];

source.forEach((item, i) => {
  item.id = i + 1;
});

console.log(source);
&#13;
&#13;
&#13;

答案 1 :(得分:2)

您可以使用.forEach()迭代数组元素并添加id

data.forEach((o, i) => o.id = i + 1);

<强>演示:

&#13;
&#13;
let data = [{
    color: "red",
    value: "#f00"
}, {
    color: "green",
    value: "#0f0"
}, {
    color: "blue",
    value: "#00f"
}, {
    color: "cyan",
    value: "#0ff"
}, {
    color: "magenta",
    value: "#f0f"
}, {
    color: "yellow",
    value: "#ff0"
}, {
    color: "black",
    value: "#000"
}];

data.forEach((o, i) => o.id = i + 1);

console.log(data);
&#13;
.as-console-wrapper { max-height: 100% !important; top: 0; }
&#13;
&#13;
&#13;

答案 2 :(得分:2)

当我使用此解决方案时,我的ID会得到一个数字 像这样:

list = [ {
    color: "red",
    value: "#f00",
    id: 0
}, {

    color: "green",
    value: "#0f0",
    id: 4
},{
    color: "blue",
    value: "#00f",
    id: 4
},{
    color: "cyan",
    value: "#0ff",
    id: 4
},{
    color: "black",
    value: "#000",
    id: 4
}] 

我的代码是这样的:

let i = 0;
list.map(n => {
        n['id'] = i;
        i++;
});

答案 3 :(得分:1)

简单的解决方案是使用map函数

let data = [
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
]

data = data.map((x, i) => {
  x.id = i + 1
  return x
})

console.log(data)

答案 4 :(得分:1)

ES6

您可以使用forEach()来获取所需的结果。

const arr =[{color: "red",value: "#f00"},{color: "green",value: "#0f0"},{color: "blue",value: "#00f"},{color: "cyan",value: "#0ff"},{color: "magenta",value: "#f0f"},{color: "yellow",value: "#ff0"},{color: "black",value: "#000"}];

arr.forEach((o,i)=>o.id=i+1);
console.log(arr);
.as-console-wrapper {max-height: 100% !important;top: 0;}

您也可以使用map()来获得所需的结果。

<强>样本

const arr =[{color: "red",value: "#f00"},{color: "green",value: "#0f0"},{color: "blue",value: "#00f"},{color: "cyan",value: "#0ff"},{color: "magenta",value: "#f0f"},{color: "yellow",value: "#ff0"},{color: "black",value: "#000"}];


console.log(arr.map((o,i)=>Object.assign(o,{id:i+1})));
.as-console-wrapper {max-height: 100% !important;top: 0;}

答案 5 :(得分:1)

您可以使用map()函数迭代对象数组。

n是您的每个对象,您可以在地图中设置id值。

希望这会有所帮助:)

let arr = [{
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
]

let i = 0;
arr.map(n => {
  n['id'] = i;
  i++;
})

  console.log(arr);

答案 6 :(得分:1)

{% for item in res%}
<tbody>
  <tr>
    <th scope="row">{{ item['_source']['lang'] }}</th>
      <td>{{ item['_source']['id'] }}</td>
      <td>{{ item['_source']['date'] }}</td>
      <td>{{ item['_source']['full_text']}}</td>
      <td>{{ item['_source']['user']['name']}}</td>
      <td>{{ item['_source']['user']['screen_name']}} </td>
      <td>{{ item['_source']['user']['location']}} </td>
      <td>{{ item['_source']['user']['id']}} </td>
      {% for i in item['_source']['entities']['user_mentions'] if i["screen_name"] %}
      <td>    {{ i["screen_name"] }} <td>
      {% else %}
       <td>   None <td>
      {% endfor %}
   </tr>
</tbody>

答案 7 :(得分:0)

不需要复杂的功能和逻辑。只需将其循环到BundleOf,它还将为您提供数组中每个对象的索引,并将forEach值分配给对象的index+1属性。

&#13;
&#13;
id
&#13;
&#13;
&#13;

答案 8 :(得分:0)

您可以使用 filter() 删除重复项,使用 reduce() 来实现所需的输出。

const colorArray = [
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

const result = colorArray
    .filter((a, i, x) => x.findIndex((t) => t.color === a.color) === i)
    .reduce((agg, item, index) => {
        item.id = index + 1;
        agg.push(item);
        return agg;
    }, []);

console.log(result);