How to stringify an array with 1 or more arrays in it as objects in jQuery

Question

I have an array that comes from the database as a list of items and 1 or more arrays that comes as key value pair in the same array. Like, a set of arrays inside an array.

var cheese_array = 
  {
    name: "Chedder",
    place: "Brie",
    string1: "Blue Stilton",

  var first_inner_array = [
    {
      name: "fi_Chedder",
      smelly: true
    },
    {
      name: "fi_Brie",
      smelly: false
    },
    {
      name: "fi_Blue Stilton",
      smelly: true
    }
   ];

  var second_inner_array = [
    {
      name: "si_Chedder",
      smelly: true
    },
    {
      name: "si_Brie",
      smelly: false
    },
    {
      name: "si_Blue Stilton",
      smelly: true
    }
   ];

  var third_inner_array = [
    {
      name: "ti_Chedder",
      smelly: true
    },
    {
      name: "ti_Brie",
      smelly: false
    },
    {
      name: "ti_Blue Stilton",
      smelly: true
    }
   ];
}

I have tried the $.each(function(){} to get the values from the cheese_array and i got the [object, object], [object, object] when i stringify the array.
I have also assigned the array to a variable like

var data1 = cheese_array.first_inner_array;
var data2 = cheese_array.second_inner_array;
var data3 = cheese_array.third_inner_array;

and when consoled, i can see the array and the elements inside it. I need to assign this to a div in HTML, so i did

$('#divID1').val(data1);
$('#divID2').val(data2);
$('#divID3').val(data3);

and when i checked if the array is been assigned to the div using

var see1 = $('#divID1').val();
console.log(JSON.stringify(see1);

is only shows an empty array.

I also tried adding

$.each(data1, function(){
  $.each(this, function(){
  };
};

but still the values from the array shows up as objects and i don't know how to get the values from the nested array.

can anyone help me?

You dont set the content of a div with val() that function sets an element's value property which <div> elements do not use. Use html() or text() for divs. Also you have to use JSON.stringify on the object to get it as a string to display it in an element, setting directly will get you that [object Object] — Patrick Evans
– Patrick Evans, Commented Nov 4, 2022 at 11:25

biberman · Accepted Answer · 2022-11-04 11:45:33Z

First: Your cheese_array object isn't created correctly. Instead of declaring the inner Arrays as vars, you should define them with a colon and a comma:

var cheese_array = 
  {
    ...
    var first_inner_array = [...];   //wrong
    first_inner_array: [...],        //correct
    ...
  }

Second: Like @Patrick Evans wrote, val() doesn't work for outputting data in an html element. If you want to output text info, just use the jquery function text():

$('#divID1').text(data1);

Working example:

var cheese_array = 
  {
    name: "Chedder",
    place: "Brie",
    string1: "Blue Stilton",

    first_inner_array: [
    {
      name: "fi_Chedder",
      smelly: true
    },
    {
      name: "fi_Brie",
      smelly: false
    },
    {
      name: "fi_Blue Stilton",
      smelly: true
    }
   ],

    second_inner_array: [
    {
      name: "si_Chedder",
      smelly: true
    },
    {
      name: "si_Brie",
      smelly: false
    },
    {
      name: "si_Blue Stilton",
      smelly: true
    }
   ],

  third_inner_array: [
    {
      name: "ti_Chedder",
      smelly: true
    },
    {
      name: "ti_Brie",
      smelly: false
    },
    {
      name: "ti_Blue Stilton",
      smelly: true
    }
   ]
}

var data1 = JSON.stringify(cheese_array.first_inner_array);
var data2 = JSON.stringify(cheese_array.second_inner_array);
var data3 = JSON.stringify(cheese_array.third_inner_array);

$('#divID1').text(data1);
$('#divID2').text(data2);
$('#divID3').text(data3);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="divID1"></div>
<br>
<div id="divID2"></div>
<br>
<div id="divID3"></div>

Collectives™ on Stack Overflow

How to stringify an array with 1 or more arrays in it as objects in jQuery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related