使用条件迭代数组对象

Question

I want to get data from array of object with ES6 way.

I have array object.

const data = [
  {
    title: 'first',
    description: "some desc",
    url: firstUrl,
  },
  {
    title: 'second',
    description: "some desc",
    url: secondUrl,
  },
];

I am trying to check if there is title === 'second' then return it's url else return firstUrl

I know I can do it with for loop. But, I want it with ES6 way. Any help would be greatly appreciated.

I tried:

let text = data.map((val) => { val.title === 'second' ? val.url : val.url });

But, not working and I know it's not good way.

Answer 1

 const secondItem = data.find(item => item.title === 'second') const url = secondItem ? secondItem.url || firstUrl

just keep it simple like this

Answer 2

You could take an object and assign the wanted key to the object. For other default titels take default .

For getting a result take the wanted key or default.

 const data = [{ title: 'first', description: "some desc", url: 'firstUrl' }, { title: 'second', description: "some desc", url: 'secondUrl' }], temp = data.reduce((r, { title, url }) => { r[title === 'second' ? title : 'default'] = url; return r; }, {}); console.log(temp.second || temp.default);

Answer 3

You can do this, you check if you have a second item in your array (condition title === 'second' ) and then you either use it or you fallback to the first one. if first (or second) is undefined you would get an Undefinded reference erro in line (*)

 const data = [ { title: 'first', description: "some desc", url: 'firstUrl', }, { title: 'second', description: "some desc", url: 'secondUrl', }, ]; // if your order is allways first and second (0 and 1) you can do this // const urlObject = data[1] || data[0] const urlObject = data.find(item => item.title === 'second') || data.find(item => item.title === 'first') // here you have your url console.log(urlObject.url) // line (*)

Answer 4

I would use reduce instead of other method (like map) if only one computed element is needed.

Also if the default is the first element, then I would start from the end of the array serching the second and then, if it is not present, I would return the first.

So reduceRight seems to be the best option

const data = [
    // ...
];

let text = data.reduceRight((prev, {title, url}, i) => {
    if(prev) {
        return prev
    }
    if(title === 'second' || i === 0) {
        return url
    }
}, null)

Answer 5

Assuming you only want to know if there is a "second" object and otherwise use the first element of the array, you can make use of .find() .

const secondItem = data.find(e => e.title === "second"); // secondItem will be undefined if not found
const result = secondItem ? secondItem.url : data[0].url;

You should also check for the edge case that data might be an empty array. The above code would throw an error when accessing the default case.

Answer 6

You can use the ternary operator to check if second exists. If so, grab its URL, otherwise, fallback to first 's URL like so:

With both: you get the second URL

 const data = [{ title: 'first', description: "some desc", url: "firstUrl" }, { title: 'second', description: "some desc", url: "secondUrl" } ]; const targetURL = data[1] ? data[1].url : data[0].url; console.log(targetURL);

With first only, you get first' s URL:

 const data = [{ title: 'first', description: "some desc", url: "firstUrl" }]; const targetURL = data[1] ? data[1].url : data[0].url; console.log(targetURL);

Also note that you need to wrap your URL values in quotes otherwise they're called as variables which leads to errors.