The array becomes empty after a value has been assigned to it

Question

The array becomes empty after a value has been assigned to it

I am currently working with a variable containing JSON data.

var blogData = [
                 {
                   "blogTitle":"Bangladesh",
                   "imagePath":"/img/blog/bangladesh.jpg"
                 },{
                   "blogTitle":"India",
                   "imagePath":"/img/blog/india.jpg"
                 }
               ]

My goal is to create a new array called titleFilter as follows:

var titleFilter = [
                    Bangladesh : "/img/blog/bangladesh.jpg",
                    India : "/img/blog/india.jpg"
                  ]

To achieve this, I have attempted the following code:

var titleFilter = [];
        for (var i = 0; i < blogData.length; i++) {
            titleFilter[blogData[i].blogTitle] = blogData[i].imagePath;   
        }

However, I am encountering an issue where the titleFilter array appears as:

var titleFilter = [
                        Bangladesh : "",
                        India : ""
                  ]

If anyone could provide assistance with this problem, it would be greatly appreciated.

javascript arrays json

Answer 1

Answer №1

Give this a try:

const travelDestinations = [
                 {
                   "destination":"Thailand",
                   "image":"/img/travel/thailand.jpg"
                 },{
                   "destination":"Greece",
                   "image":"/img/travel/greece.jpg"
                 }
               ];
               
const destinationImages = travelDestinations.reduce((acc, place)=> (acc[place.destination] = place.image , acc),{});

console.log(destinationImages);

Answer 2

Give this a try:

const travelDestinations = [
                 {
                   "destination":"Thailand",
                   "image":"/img/travel/thailand.jpg"
                 },{
                   "destination":"Greece",
                   "image":"/img/travel/greece.jpg"
                 }
               ];
               
const destinationImages = travelDestinations.reduce((acc, place)=> (acc[place.destination] = place.image , acc),{});

console.log(destinationImages);

Answer 3

Answer №2

If you're uncertain about your search, consider utilizing a map in this manner to accomplish it.

let items = new Object(); // or let items = {};
items[blogData[index].title] = blogData[index].url;

Answer 4

If you're uncertain about your search, consider utilizing a map in this manner to accomplish it.

let items = new Object(); // or let items = {};
items[blogData[index].title] = blogData[index].url;

Answer 5

Answer №3

 const postList = [
                {
                  "postTitle":"Summer Recipes",
                  "imagePath":"/img/posts/summer-recipes.jpg"
                },
                {
                 "postTitle":"DIY Crafts",
                 "imagePath":"/img/posts/diy-crafts.jpg"
                }
              ]

const titleFilter = {}
postList.forEach( post => titleFilter[post.postTitle] = post.imagePath )

Implement this code snippet to populate the titleFilter with the necessary data.

Answer 6

 const postList = [
                {
                  "postTitle":"Summer Recipes",
                  "imagePath":"/img/posts/summer-recipes.jpg"
                },
                {
                 "postTitle":"DIY Crafts",
                 "imagePath":"/img/posts/diy-crafts.jpg"
                }
              ]

const titleFilter = {}
postList.forEach( post => titleFilter[post.postTitle] = post.imagePath )

Implement this code snippet to populate the titleFilter with the necessary data.

The array becomes empty after a value has been assigned to it

Answer №1

Answer №2

Answer №3

Similar questions

Navigating through sibling elements can be accomplished by using various methods in

The most effective method for adding a new key/value pair to a nested object

Create a variable and set it equal to the value of a form

Setting the response type to text in Angular 6 when making an http call

Value comparison displayed in text boxes

What is causing this issue that is preventing me from async rendering Vue components?

Issue with parsing JSONP using jQuery's AJAX request

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

The server is constantly sending data through Server Sent Events

The ajax method for loading an xml file results in displaying the undefined message

How to handle a JSON file that references a deleted class?

What methods can I utilize from Google Maps within Vuex's createStore()?

Transforming AngularJS $http POST requests into GET requests

Utilize the most recent impacted information stored within an object

Clicking on an item will now automatically remove it from the selection, rather than requiring you to click on a specific

Mirroring an array in Java

What could be causing the promise in Angular 8 to return an undefined value, even though it was correctly logged just before it was resolved?

Enable/disable specific dates in datepicker depending on dropdown selection

ajax request sends data to php file, which then processes the data and sends it back using $_POST

Expanding upon passing arguments in JavaScript